携帯端末内の全角縦型ナビバー

Question

2列のレイアウトがあります。左の列には、小さな画面で折りたたむことのできる垂直ナビゲーションバーメニューがあります。誰もがモバイル上の各側面に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) {} - （> = 992ピクセル）
col-lg- *：大型デスクトップデスクトップ| @media (min-width: 1200px) {} - （> = 1200px）ブートストラップ3グリッドオプションhere