col-md-2をcol-md-2の中に挿入して全幅を取る方法

Question

col-md-2 divの中に行（col-md-12）divを挿入しました。私は行divがページの全幅を取るようにしたい。しかし、それは親col-md-2の幅しかとらない。ブートストラップでこの問題をどのように克服できますか？

<div class="options-main row"> 
    <div class="col-md-2 col-sm-3 border-box">  
      <img src="#" class="img-responsive">   
     <div class="options-main-sub row"> 
      <div class="col-md-2 col-sm-3 border-box"> 

      </div> 
      <div class="col-md-2 col-sm-3 border-box"> 

      </div> 
      <div class="col-md-2 col-sm-3 border-box"> 

      </div> 
      <div class="col-md-2 col-sm-3 border-box"> 

      </div> 
      <div class="col-md-2 col-sm-3 border-box"> 

      </div> 
      <div class="col-md-2 col-sm-3 border-box"> 

      </div> 
     </div> 
    </div> 
    <div class="col-md-2 col-sm-3 border-box"> 

    </div> 
    <div class="col-md-2 col-sm-3 border-box"> 

    </div> 
    <div class="col-md-2 col-sm-3 border-box"> 

    </div> 
    <div class="col-md-2 col-sm-3 border-box"> 

    </div> 
    <div class="col-md-2 col-sm-3 border-box"> 

    </div> 
</div> 

これは、実際にどのように見えるかです。最初の行の各列には2番目の行に6つの対応する列があります

Answer 1

ページ内に作成する行ごとに個別のrow要素を使用します。これはブートストラップの基本的な概念であり、このコンセプトを理解することなく進んではいけません。次のように

あなたの問題を解決することができます。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-2 col-xs-push-2"> 
 
     Content 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-xs-2"> 
 
     Content 
 
    </div> 
 
    <div class="col-xs-2"> 
 
     Content 
 
    </div> 
 
    <div class="col-xs-2"> 
 
     Content 
 
    </div> 
 
    <div class="col-xs-2"> 
 
     Content 
 
    </div> 
 
    <div class="col-xs-2"> 
 
     Content 
 
    </div> 
 
    <div class="col-xs-2"> 
 
     Content 
 
    </div> 
 
    </div> 
 
</div>

は、上記のコードにして、注意してください、私は、小さな画面上で同じプレビューを見ることがcol-xs-xとcol-md-xを交換しました。

col-xs-push-xクラスにも注意してください。オフセットを設定するために使用されます。したがって、このデモでは、第1行の第2列のエントリに対応すると仮定して、第2行に6列あります。

classまたはidの関係を使用して、特定の2番目の行が最初の行のエントリに属していることを示す必要があります。

---

代わりに、しかし、その本 ないブートストラップ方法を注意してください fixedブロック

.hover { 
 
    position: fixed; 
 
    width: 100%; 
 
    left: 0 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-2 col-xs-push-2"> 
 
     Content 
 
     <div class="hover"> 
 
     <div class="row"> 
 
      <div class="col-xs-2"> 
 
      Content 
 
      </div> 
 
      <div class="col-xs-2"> 
 
      Content 
 
      </div> 
 
      <div class="col-xs-2"> 
 
      Content 
 
      </div> 
 
      <div class="col-xs-2"> 
 
      Content 
 
      </div> 
 
      <div class="col-xs-2"> 
 
      Content 
 
      </div> 
 
      <div class="col-xs-2"> 
 
      Content 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
</div>

内の第二列を囲むことができます。