2017-04-24 16 views
0

私はBootstrap v3.3.7を使用しているWebサイトで作業しています。しかし、私はモバイルビューに行が画面幅の外に出て行くときに問題が発生します。そして、私のdivの構造が モバイルデバイスでのブートストラップ応答の問題

このような
<div class="container"> 
<div class="row" id="something"> 
    <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12" id="left-side"> 
     <div class="row"> 
     <div class="col-sm-5 col-xs-5" ></div> 
     <div class="col-sm-7 col-xs-7" ></div> 
     </div> 
    </div> 
<div class="col-lg-9 col-md-9 col-sm-12 col-xs-12"> 
    <div class="row"> 
     <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"></div> 
     <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"></div> 
     <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"></div> 
     <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"></div> 
     <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"></div> 
     <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"></div> 
     <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"></div> 
     <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"></div> 
     <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"></div> 
    </div> 
</div> 

</div> 

ものです デザインでいくつかの問題を引き起こしては、誰もがこのような構造と間違っているものを私を助けることができると、なぜスクロールバーは、ページの一番下に来ていますか? 私は

#something{margin:0px} 

を追加するとき、それは私はいくつかの具体的な理由のための私の正確なコードを共有することはできません

は申し訳ありませんが、問題を修正することを言及したいと思います。 ty

+0

フィドルを提供しますか? –

+0

'com-sm-4'は' col-sm-4'でなければなりません。 – herrh

+1

すべてがこのコードでうまくいきます。問題は内部要素の一部です –

答えて

1

デフォルトでは、外側のdivの左右の余白(左右の余白から15pxのパディング)をカバーするために、左右の余白は-15pxです。おそらくコンテナまたは任意のcol divので、このマージンを削除すると、サイトの構造が調整されず、モバイルの下にスクロールバーが作成されます。だから、親切に#something {margin:0px}をモバイルの幅で削除してください。 あなたはCSSを追加する下部にあるスクロールバーを非表示にする場合: 体(オーバーフロー-X:隠された;)

他の問題は、私に知らせている場合。

関連する問題