如何在我的情況下設置響應div？

我想使用col-md-2用於大型pc視圖，而col-xs-12用於平板電腦視圖。如何在我的情況下設置響應div？

我的問題是，當我轉向更大的寬度視圖時，我看到每個div之間存在差距。這在平板電腦視圖中不會發生。

HTML代碼：

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

 
<div class="container"> 
 
    <div id="wrapper"> 
 
     <div class="row"> 
 
      <div class="col-md-1"></div> 
 
      <div class="col-xs-12 col-md-2"> 
 
       <div class="col-xs-3 col-md-12 box1"> 
 
        test 
 
       </div> 
 
       <div class="col-xs-9 col-md-12 box2"> 
 
        test 2 
 
       </div> 
 

 
      </div> 
 

 
      <div class="col-xs-12 col-md-2"> 
 
       <div class="col-xs-3 col-md-12 box1"> 
 
        test 
 
       </div> 
 
       <div class="col-xs-9 col-md-12 box2"> 
 
        test 2 
 
       </div> 
 

 
      </div> 
 

 
      <div class="col-xs-12 col-md-2"> 
 
       <div class="col-xs-3 col-md-12 box1"> 
 
        test 
 
       </div> 
 
       <div class="col-xs-9 col-md-12 box2"> 
 
        test 2 
 
       </div> 
 

 
      </div> 
 

 
      <div class="col-xs-12 col-md-2"> 
 
       <div class="col-xs-3 col-md-12 box1"> 
 
        test 
 
       </div> 
 
       <div class="col-xs-9 col-md-12 box2"> 
 
        test 2 
 
       </div> 
 

 
      </div> 
 

 
      <div class="col-xs-12 col-md-2"> 
 
       <div class="col-xs-3 col-md-12"> 
 
        test 
 
       </div> 
 
       <div class="col-xs-9 col-md-12 test2"> 
 
        test 2 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

的jsfiddle link

誰能幫我一下嗎？謝謝！

來源

2014-12-05 BonJon

你試圖巢網格。如果您嵌套網格，則需要在兩個列類之間額外添加<div class="row">以補償填充。

例如<div>與類別col-xs-12 col-md-2有一個直接子<div>與類col-xs-3 col-md-12 box1。

改變這種從

<div class="col-xs-12 col-md-2"> 
    <div class="col-xs-3 col-md-12 box1">

到

<div class="col-xs-12 col-md-2"> 
    <div class="row"> 
     <div class="col-xs-3 col-md-12 box1">

我已經更新了你的榜樣添加這些<div class="row">的

.box1 { 
 
    background-color: grey; 
 
} 
 
.box2 { 
 
    background-color: red; 
 
}

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

 
<div class="container"> 
 
    <div id="wrapper"> 
 
    <div class="row"> 
 
     <div class="col-md-1"></div> 
 
     <div class="col-xs-12 col-md-2"> 
 
     <div class="row"> 
 
      <div class="col-xs-3 col-md-12 box1"> 
 
      test 
 
      </div> 
 
      <div class="col-xs-9 col-md-12 box2"> 
 
      test 2 
 
      </div> 
 
     </div> 
 

 
     </div> 
 

 
     <div class="col-xs-12 col-md-2"> 
 
     <div class="row"> 
 
      <div class="col-xs-3 col-md-12 box1"> 
 
      test 
 
      </div> 
 
      <div class="col-xs-9 col-md-12 box2"> 
 
      test 2 
 
      </div> 
 
     </div> 
 
     </div> 
 

 
     <div class="col-xs-12 col-md-2"> 
 
     <div class="row"> 
 
      <div class="col-xs-3 col-md-12 box1"> 
 
      test 
 
      </div> 
 
      <div class="col-xs-9 col-md-12 box2"> 
 
      test 2 
 
      </div> 
 
     </div> 
 
     </div> 
 

 
     <div class="col-xs-12 col-md-2"> 
 
     <div class="row"> 
 
      <div class="col-xs-3 col-md-12 box1"> 
 
      test 
 
      </div> 
 
      <div class="col-xs-9 col-md-12 box2"> 
 
      test 2 
 
      </div> 
 
     </div> 
 
     </div> 
 

 
     <div class="col-xs-12 col-md-2"> 
 
     <div class="row"> 
 
      <div class="col-xs-3 col-md-12"> 
 
      test 
 
      </div> 
 
      <div class="col-xs-9 col-md-12 test2"> 
 
      test 2 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2014-12-05 17:32:48 ckuijjer

是的，但隨後在平板電腦視圖中，灰色列的左側和紅色框的右側不再有填充。請查看我的jsfiddle鏈接，我在平板視圖中添加了填充+1雖然 – BonJon 2014-12-05 17:43:22

您可以通過將「.container」的填充設置爲「padding-left：30px」和「padding-right：30px」，或者重新考慮爲什麼需要嵌套。 – ckuijjer 2014-12-05 19:22:46

間隙在Bootstrap網格設置中定義。帶有xs- *的類都是100％寬度的塊，所以沒有空隙。如果你想擁有電網系統不會對所有屏幕尺寸的差距，你需要定製你的bootstrap編譯 - http://getbootstrap.com/customize/

來源

2014-12-05 17:28:05

如何在我的情況下設置響應div？

回答

相關問題