如何使引導程序3面板的水平列表響應？

我正在使用Bootstrap 3並努力使面板響應水平列表。我的HTML如下。它在所有瀏覽器中呈現良好，但在移動分辨率上文本沒有響應。任何想法我失蹤？如何使引導程序3面板的水平列表響應？

<body> 
<div class="container"> 
    <div class="row"> 
     <div class="col-xs-2"> 
      <div class="panel panel-primary"> 
       <div class="panel-heading"> 
        <h3 class="panel-title">Sprinkler System <br />Test & Inspection</h3> 
       </div> 
       <div class="panel-body"> 
        Lorem ipsum dolor sit amet, qui ne iudicabit honestatis. Cu utroque adversarium usu, ius ut autem consulatu. 
       </div> 
      </div> 
     </div> 
     <div class="col-xs-2"> 
      <div class="panel panel-primary"> 
       <div class="panel-heading"> 
        <h3 class="panel-title">Heading for panel</h3> 
       </div> 
       <div class="panel-body"> 
        Lorem ipsum dolor sit amet, qui ne iudicabit honestatis. Cu utroque adversarium usu, ius ut autem consulatu. 
       </div> 
      </div> 
     </div> 
     <div class="col-xs-2"> 
      <div class="panel panel-primary"> 
       <div class="panel-heading"> 
        <h3 class="panel-title">Heading for panel</h3> 
       </div> 
       <div class="panel-body"> 
        Lorem ipsum dolor sit amet, qui ne iudicabit honestatis. Cu utroque adversarium usu, ius ut autem consulatu. 
       </div> 
      </div> 
     </div> 

     <div class="col-xs-2"> 
      <div class="panel panel-primary"> 
       <div class="panel-heading"> 
        <h3 class="panel-title">Heading for panel</h3> 
       </div> 
       <div class="panel-body"> 
        Lorem ipsum dolor sit amet, qui ne iudicabit honestatis. Cu utroque adversarium usu, ius ut autem consulatu. 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
</body>

來源

2015-06-18 rumi

爲了使其移動友好，您應該在較低分辨率下獲得不同的色譜柱尺寸。這些詞太長，以至於不適合col-xs-2。您可以通過給它兩類col-xs-6和col-sm-3來保留4列布局。一旦達到較小的分辨率，列將被適當地重新排列。

您的包含面板的div應該將類更改爲它們中的每一個。將使你在XS分辨率和4列布局的2列布局在小及以上

<div class="col-xs-6 col-sm-3"> 

</div>

如果您有問題與面板而不是當他們被重新安排，這可能解決這個問題的較低分辨率的正確對齊： Bootstrap fluid row columns with different height

你只需要添加CSS類

.col-xs-6:nth-child(odd) { 
    clear: both; 
}

來源

2015-06-18 16:05:44 Steve

是不是應該去到下一行，而不是走出小分辨率的面板中的文本？ – rumi

文本將進入空格的下一行。但是當你有一個單詞是很多字符時，它不會分割這個單詞。 col-2使用寬度％值。所以隨着屏幕的縮小，寬度會導致單詞粘在面板之外。列布局可用於在某些分辨率下增加列的寬度。這就是爲什麼我建議切換到col-xs-6，這將使其在該分辨率50％的寬度，而不是17％〜 – Steve

你可以給我任何示例或鏈接，告訴如何增加更低的分辨率 – rumi

如何使引導程序3面板的水平列表響應？

回答

相關問題