携帯端末では、ブートストラップのウェブサイトのボディ幅が100％ではありません

Question

このページはまだ登録されていませんhttp://brighterwebdesign.co.uk/web-solutions-business-startup.html。デスクトップでうまく動作しますが、480px（Nexus 5xなど）よりも小さい画面のモバイルデザインで見ると、テキストはボディを完全に埋めていません（下の画像を見る）。

私はビューポートで遊んだり、身体に100％の幅を追加したりしていますが、これを修正する方法を知っていますか？

おかげ

layout on a nexus 5x

Answer 1

は.rowの.f​​lexに負のマージンを外し、2色のセクションオフパディングをノック。あなたのブラウザのツールでそれを試して、あふれている問題を削除するようです。

Answer 2

.row.flexからmargin-left:-15px;とmargin-right:-15pxを削除し、0を設定するには、左と例えば.other-services-centred

のための右のパディングあなたは

.row.flex { 
     margin-left:0; 
     margin-right:0; 
    } 
.other-services-centred { 
     padding:45px 0 ; 
    } 

が、それはあなたが何を定義していない

Answer 3

を役に立てば幸い記述する必要がありますモバイルデバイスには.other-services-centeredの動作があります。すなわち、デバイスのための定義されたグリッドは、767px;ピクセルワイドスクリーンまで定義される。 ブートストラップクラスがどのように機能するかについて、具体的な方法があります。その構造を理解する必要があります。

HTMLの場合は、2つの列の方法で表示する場合はcol-xs-6クラスを追加し、それらのdivを積みたい場合はcol-xs-12を使用します。

<div style="background-color: #D8BF6E;" class="col-sm-6 col-xs-6 other-services-centred" .....> 

例の画像：試してみましたが、問題は、ディスプレイによって引き起こされたすべての

Answer 4

ありがとう：フレックス。ここで私はそれを修正した方法です：

@media(max-width:768px){ .row.flex { display: inherit; } }