comment faire un saut de ligne dans le Bootstrap 3.3.7

Comment puis-je faire un saut de ligne dans le bootstrap?, Je pouvais <br> mais je voudrais savoir si je peux faire cela avec bootstrap et d'éviter d'insérer <br> dans mon code.

Je voudrais un espace vide entre le bouton et col-md-12

jsfiddle: https://jsfiddle.net/y9mznrna/

css:

.col-md-8 {
  border: 1px solid red;
}

.col-md-4 {
  border: 1px solid blue;
}

html:

<div class="col-md-12">
  <h2>test</h2>
  <div class="headline-date">Tuesday
    <button type="button" class="btn btn-primary pull-right">
      <i class="fa fa-user-plus " aria-hidden="true"></i>Call
    </button>
  </div>
</div>

<div class="row">
  <div class="col-md-12">
    <!-- members table -->
    <div class="col-md-8">
      1
    </div>

    <div class="col-md-4">
      2
    </div>

  </div>
</div>
  • mis div vide <div style="height: 10px;"></div> après le bouton
  • Je voudrais effacer le flotteur et de donner une marge pour le bouton.
  • css personnalisé est la seule solution pour bootstrap 3
  • Pour autant que je suis à la recherche à la classe de bootstrap definations, ils ont même utilisé la classe personnalisée pour donner à fond padding/margin. De référence pour l'amorçage de exemple
InformationsquelleAutor raduken | 2017-04-28
  1. 2

    Tout d'abord, le bouton doit être à l'intérieur de sa propre ligne. Droit maintenant, vous avez juste un orphelin col-xs-12 qui viole le Bootstrap normes. Ce faisant, pour séparer au mieux. Après que vous avez besoin d'une certaine marge d'entre eux

    <div class="row">
<div class="col-md-12">
  <h2>test</h2>
  <div class="headline-date">Tuesday
    <button type="button" class="btn btn-primary pull-right">
      <i class="fa fa-user-plus " aria-hidden="true"></i>Call
    </button>
  </div>
</div>
</div>
<div class="row">
  <div class="col-md-12 ">
    <!-- members table -->
    <div class="col-md-8">
      1
    </div>

    <div class="col-md-4">
      2
    </div>

  </div>
</div>

    Et style:

    .col-md-8 {
  border: 1px solid red;
}

.col-md-4 {
  border: 1px solid blue;
}

.headline-date { 
  margin-bottom: 30px;
}

    Exemple: https://jsfiddle.net/y9mznrna/1/

    InformationsquelleAutor DavidG
  2. 0

    Envelopper la première colonne dans une ligne comme vous l'avez fait lors de la dernière de contenu, comme ceci:

    <div class="row">
<div class="col-md-12">
content
</div>
</div>
    InformationsquelleAutor Michael
  3. 0

    ajouter un margin-top:10px; à côté de votre style de bouton.

    <button style="margin-top:10px;" type="button" class="btn btn-primary pull-right">
      <i class="fa fa-user-plus " aria-hidden="true"></i>Call
</button>

    vous pouvez changer de 10px à tout ce que vous voulez l'écart à

    InformationsquelleAutor Haque
  4. 0

    Vous pouvez utiliser un vide col avec une hauteur définie, comme ceci:

    HTML:

    <div class="row">
  <div class="col-md-12 bs-linebreak">
  </div>
</div>

    CSS:

    .bs-linebreak {
  height:10px;
}

    Exemple: https://jsfiddle.net/cyo5xbef/2/

    InformationsquelleAutor PinguinoSod