Bootstrap 3 - 2 colonnes imbriquées les lignes

Je suis en train de réaliser ce qui suit dans le Bootstrap 3 en utilisant aussi peu de ma propre balisage et CSS que possible. Idéalement, j'aimerais réaliser cela à l'aide de pure Bootstrap Balisage sans avoir recours à des hacks. J'ai regardé la documentation, mais ne peut pas voir un moyen standardisé....

Comme vous pouvez le voir ci-dessous, je vais essayer d'obtenir deux lignes avec un trou dans le centre.

Balisage comme suit

<section class="row">

   <article class="col-sm-12 col-md-6">
     <!--ROW LEFT-->
     <div class="row">
      <div class="col-sm-4">col</div>
      <div class="col-sm-4">col</div>
      <div class="col-sm-4">col</div>
     </div>
   </article>

   <article class="col-sm-12 col-md-6">
     <!--ROW RIGHT-->
     <div class="row">
      <div class="col-sm-4">col</div>
      <div class="col-sm-4">col</div>
      <div class="col-sm-4">col</div>
     </div>
   </article>
</section>

Le seul exemple similaire Bootstrap a dans les Docs est ci-dessous, mais vous n'obtenez pas une lacune dans le centre.

AMORCE DE BALISAGE

<div class="row">
  <div class="col-sm-12">
    <div class="row">
      <div class="col-sm-6">
      content
      </div>
      <div class="col-sm-6">
      content
      </div>
    </div>
  </div>
</div>

OriginalL'auteur user933791 | 2013-10-11

De s'étendre sur les Skelly réponse, vous pouvez utiliser Bootstrap de la colonne de décalage classes de créer des écarts entre les colonnes:

<div class="container"><section class="row">

   <article class="col-sm-12 col-md-5">
     <!--ROW LEFT-->
     <div class="row" style="background-color:blue;">
      <div class="col-sm-4" style="background-color:orange;">col</div>
      <div class="col-sm-4" style="background-color:silver;">col</div>
      <div class="col-sm-4" style="background-color:orange;">col</div>
     </div>
   </article>

   <article class="col-sm-12 col-md-5 col-md-offset-2">
     <!--ROW RIGHT-->
     <div class="row" style="background-color:blue;">
      <div class="col-sm-4" style="background-color:silver;">col</div>
      <div class="col-sm-4" style="background-color:orange;">col</div>
      <div class="col-sm-4" style="background-color:silver;">col</div>
     </div>
   </article>

</section></div>

http://bootply.com/103191

Cela évite d'avoir à ajouter d'autres styles, mais permet de créer un écart plus grand que vous êtes à l'aide de deux des colonnes virtuelles pour créer de l'espace.

Si vous n'avez pas l'esprit de l'espace supplémentaire sur la droite, vous pourriez faire le décalage de 1 à la place.

OriginalL'auteur John Reid

Quelle taille vous voulez que le fossé?

À l'aide de BS cols, vous pourriez faire quelque chose comme ça..

<div class="row">
  <div class="col-sm-12">
    <div class="row">
      <div class="col-sm-5">
      content
      </div>
      <div class="col-sm-1"></div> <div class="col-sm-1"></div>
      <div class="col-sm-5">
      content
      </div>
    </div>
  </div>
</div>

Démo: http://bootply.com/87117

OriginalL'auteur Zim

(ou) d'essayer de construire avec un rembourrage:

<section class="row" style="background-color:red;">

   <article class="col-sm-12 col-md-6" style="padding-right:30px;">
     <!--ROW LEFT-->
     <div class="row" style="background-color:blue;">
      <div class="col-sm-4" style="background-color:orange;">col</div>
      <div class="col-sm-4" style="background-color:silver;">col</div>
      <div class="col-sm-4" style="background-color:orange;">col</div>
     </div>
   </article>


   <article class="col-sm-12 col-md-6" style="padding-left:30px;">
     <!--ROW RIGHT-->
     <div class="row" style="background-color:blue;">
      <div class="col-sm-4" style="background-color:silver;">col</div>
      <div class="col-sm-4" style="background-color:orange;">col</div>
      <div class="col-sm-4" style="background-color:silver;">col</div>
     </div>
   </article>

</section>

Votre écart en rouge, voir: http://bootply.com/87152

OriginalL'auteur Bass Jobsen

Vous devez vous connecter pour publier un commentaire.