なぜブートストラップシンプル全幅レイアウトがオーバーフロー

Question

が発生します。ページは全幅レイアウトになるので、コーディングを開始した後、ウィンドウ内に水平スクロールバーが表示されています。オーバーフロー隠しでそれをハッキングすることは私には正しいように見えません。誰かがこれがなぜ起こるのか、それを避ける方法を説明できますか？

これは、以下のようなヘッダーの正しいマークアップですか？ /////// ヘッダー //////

---Link----------------------------------------------------------------LINK 
---Logo----------main-navigation---------------------------------------Link 

    <div id="wrapper"> 
     <header id="masthead" class="site-header" role="banner"> 
      <div id="top-header"> 
       <a href="#">1</a> 
       <a href="#">2</a> 
       <a href="#">3</a> 
      </div> 
      <div id="bottom-header" class="row"> 
        <div id="left-header" class="col-md-3"> 
         <div class="logo"> 
          <img src="<?php echo get_site_url().'/wp-content/themes/test-theme/img/logo.png'?>" alt=""/> 
         </div> 
        </div> 
        <div id="right-header" class="col-md-9"> 
         <div class="main-navigation"> 
          <?php wp_nav_menu('main-menu'); ?> 
         </div> 
        </div> 
      </div> 
     </header><!-- #masthead --> 
<div id="content"> 
    Content here 
</div> 
</wrapper> 

Answer 1

は、このクラスで1つのdiv要素にcontainer-fluid

 <div id="wrapper"> 
       <header id="masthead" class="site-header" role="banner"> 
        <div id="top-header"> 
         <a href="#">1</a> 
         <a href="#">2</a> 
         <a href="#">3</a> 
        </div> 
    <div class="container-fluid"> 
        <div id="bottom-header" class="row"> 
          <div id="left-header" class="col-md-3"> 
           <div class="logo"> 
            <img src="<?php echo get_site_url().'/wp-content/themes/test-theme/img/logo.png'?>" alt=""/> 
           </div> 
          </div> 
          <div id="right-header" class="col-md-9"> 
           <div class="main-navigation"> 
            <?php wp_nav_menu('main-menu'); ?> 
           </div> 
          </div> 
        </div> 
</div> 
       </header><!-- #masthead --> 
     <div id="content"> 
      Content here 
     </div> 

    </div> 

Answer 2

をこのHTMLをラップ@Lalji Tadhaniが示唆したように行います。

.noPadding { 
    padding:0px; 
} 

これで、埋め込みが不要なhtml要素にこのクラスを追加できます。 フレームワークを使用するときは、常にあなたに合っていないもので動作します。あなたはそれを回避するためのきれいな方法を見つけなければなりません。

ヘッダーに関するご質問に関して： リンクの順序付けられていないリストを使用するのが意味上より正確です。しかし、残りはうまくいくようです。

Answer 3

マージンに問題があります。 あなたのページにこのスタイルを追加します。

body { 
margin : 0px; 
} 

を私の意見では、それはあなたの問題を解決します。