web-dev-qa-db-ja.com

Bootstrap 3-2列のネストされた行

Bootstrap 3で、自分のマークアップとCSSをできるだけ少なくして、次のことを実現しようとしています。理想的には、ハックに頼ることなく、純粋なBootstrapマークアップを使用してこれを実現したいと思います。ドキュメントを見ましたが、標準化された方法がわかりません。

以下に示すように、中央にギャップがある2つの行を取得しようとしています。 bs row

私のマークアップは次のとおりです

<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>

Bootstrapがドキュメントに持っている唯一の同様の例を以下に示しますが、中央にギャップはありません。

bootstrap

ブートストラップマークアップ

<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>
csstwitter-bootstrap-3multiple-columns
9
user933791

Skellyの答えを拡張するために、Bootstrapの列オフセットクラスを使用して、列間にギャップを作成できます。

<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

これにより、スタイルを追加する必要がなくなりますが、2つの仮想列を使用してスペースを作成するため、ギャップが大きくなります。

右側の余分なスペースを気にしない場合は、代わりにオフセット1を作成できます。

12
John Reid

（または）パディングを使用して構築してみてください：

<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>

赤字のギャップについては、以下を参照してください： http://bootply.com/87152

0
Bass Jobsen

どのくらいのギャップが必要ですか？

BS colsを使用すると、次のようなことができます。

<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>

デモ： http://bootply.com/87117

0
Zim