如何在col-md-2中插入col-md-12並獲取全寬

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> 

這是它的外觀，在實際。第一行中的每列將在第二行中具有6個對應的列

Answer 1

對您要在頁面中創建的每一行使用單獨的row元素。這是bootstrap的一個基本概念，如果不理解這個概念，就不應該繼續前進。

你的問題是可以解決如下：

<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-md-x與col-xs-x看到小屏幕相同的預覽。

另請注意col-xs-push-x類。它用於設置偏移量。所以，在這個演示中，我假設對應於第一行第二列的條目，第二行有6列。

您需要使用一些class或id關係來指示特定的第二行屬於第一行中的條目。

---

或者，您也可以將 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>

但是裏面第二行，請注意，這不是 一個引導方式。