Col-on移動設備中的全角垂直導航欄

Question

我有兩列的佈局。左欄有一個垂直導航菜單，可在較小的屏幕上摺疊。有沒有人知道如何在移動設備的每一邊沒有15px填充的情況下使其成爲全角？我知道這個填充來自.col-類，但如果我將其更改爲0px，那麼較大屏幕上的佈局會變得很難看，沒有空格。

<div class="container"> 
    <div class="row">  
     <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> 
      <nav class="navbar navbar-default" role="navigation"> 
       <button type="button" class="btn btn-primary btn-lg btn-block visible-xs" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1"><i class="fa fa-lg fa-bars"></i> Menu</button> 
      <div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1"> 
      some content here 
      </div> 
     </div> 
     <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8"> 
      <div class="row"> 
       <div class="col-sm-4 col-lg-4 col-md-4"> 
       some content here 
       </div> 
       <div class="col-sm-4 col-lg-4 col-md-4"> 
       some content here 
       </div> 
       <div class="col-sm-4 col-lg-4 col-md-4"> 
       some content here 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

您是否嘗試過插入：

@media(max-width: 767px) { .col-xs-12 { padding: 0 } }

由於XS的尺寸是從0到767像素，您可以用這些沒有填充。

乾杯！

Answer 2

，首先你有一個錯誤的HTML標記看到引導文檔進一步指令

網格系統

• 行必須放在一個.container（固定寬度）或.container內-fluid（全角）適當對齊和填充。
• 內容應放在列中，並且只有列可以是行的直接子節點。從here

  ---

  一種解決方案兩者

是使用另一個類的行元素和自定義媒體查詢移除填充。

媒體查詢

最小寬度：指一切大於或等於給定的量。
最大寬度：指所有小於或等於給定數量的東西。

col-xs- *：特小設備手機|無需媒體查詢 - （< 768px）
col-sm- *：小型設備平板電腦| @media (min-width: 768px) {} - （> = 768px）
col-md- *：中等設備桌面| @media (min-width: 992px) {} - （> = 992px）
col-lg- *： Large devices Desktops | @media (min-width: 1200px) {} - （> = 1200像素）

約3引導網格選項here