自舉網格佈局未按預期工作

Question

我使用的是Bootstrap 3.3.5，我有兩列：.col-md-9和.col-md-3。

但是，類.col-md-3的那個以某種方式取得父行的全部寬度，而不是僅僅取25％。

這是怎麼發生的？

注意：在完整頁面中運行代碼段並調整瀏覽器窗口的大小，直到看到此行爲。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-12 col-md-9"> 
 
     <div>Element</div> 
 
     <div>Element</div> 
 
     <div>Element</div> 
 
     <div>Element</div> 
 
     <div>Element</div> 
 
    </div> 
 
    <div class="hidden-xs col-md-3"> 
 
     <ul class="list-group"> 
 
     <li class="list-group-item"> 
 
      <span class="badge">12</span> 
 
      Matt Damon 
 
     </li> 
 
     <li class="list-group-item"> 
 
      <span class="badge">9</span> 
 
      Brad Pitt 
 
     </li> 
 
     <li class="list-group-item"> 
 
      <span class="badge">4</span> 
 
      George Clooney 
 
     </li> 
 
     <li class="list-group-item"> 
 
      <span class="badge">2</span> 
 
      Angelina Jolie 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

正在發生的事情是，當你縮小你的瀏覽器窗口，你打按大小順序引導斷點。 LG，MD，SM和XS。

col-md-*類隻影響斷點MD和更大的元素; MD和LG。但是，hidden-xs類僅影響XS斷點。

當您點擊SM斷點時，這兩個類都不會影響div，因此它將恢復爲默認樣式（全角）。

此外，您還可以使用hidden-sm類，它也會在該斷點處隱藏它。

這裏是一個方便的圖表，顯示該斷點hidden和visible類影響因素：http://getbootstrap.com/css/#responsive-utilities-classes

Answer 2

你想用col-sm-*。

引導有4個媒體查詢：

• col-xs
• col-sm
• col-md
• 和col-lg

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-12 col-sm-9 col-md-9"> 
 
     <div>Element</div> 
 
     <div>Element</div> 
 
     <div>Element</div> 
 
     <div>Element</div> 
 
     <div>Element</div> 
 
    </div> 
 
    <div class="hidden-xs col-xs-0 col-sm-3 col-md-3"> 
 
     <ul class="list-group"> 
 
     <li class="list-group-item"> 
 
      <span class="badge">12</span> 
 
      Matt Damon 
 
     </li> 
 
     <li class="list-group-item"> 
 
      <span class="badge">9</span> 
 
      Brad Pitt 
 
     </li> 
 
     <li class="list-group-item"> 
 
      <span class="badge">4</span> 
 
      George Clooney 
 
     </li> 
 
     <li class="list-group-item"> 
 
      <span class="badge">2</span> 
 
      Angelina Jolie 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

你必須把hidden-sm太

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-12 col-md-9"> 
 
     <div>Element</div> 
 
     <div>Element</div> 
 
     <div>Element</div> 
 
     <div>Element</div> 
 
     <div>Element</div> 
 
    </div> 
 
    <div class="hidden-xs hidden-sm col-md-3"> 
 
     <ul class="list-group"> 
 
     <li class="list-group-item"> 
 
      <span class="badge">12</span> 
 
      Matt Damon 
 
     </li> 
 
     <li class="list-group-item"> 
 
      <span class="badge">9</span> 
 
      Brad Pitt 
 
     </li> 
 
     <li class="list-group-item"> 
 
      <span class="badge">4</span> 
 
      George Clooney 
 
     </li> 
 
     <li class="list-group-item"> 
 
      <span class="badge">2</span> 
 
      Angelina Jolie 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div>