なぜこの単純なブートストラップのコードが水平スクロールを引き起こすのですか？

私は水平にして3列のメディアオブジェクトを構築しようとしているが、私のコードの原因がスクロールよ、ブートストラップするために初心者だ：
これはフィドルリンク私のjsです：http://jsfiddle.net/5ea98ytm/
とここに私のコードです：なぜこの単純なブートストラップのコードが水平スクロールを引き起こすのですか？

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Bootstrap Example1</title> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
</head> 

<body> 
<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-4"> 
      <div class="container"> 
       <div class="media"> 
        <div class="media-left"> 
         <a href="#"> 
          <img class="media-object" src="http://placehold.it/140x140" alt="..."> 
         </a> 
        </div> 
        <! MEDIA LEFT --> 
        <div class="media-body"> 
         <h4 class="media-heading">Media heading</h4> some texts 
        </div> 
        <! MEDIA BODY --> 
       </div> 
       <! MEDIA --> 

      </div> 
      <! CONTAINER --> 
     </div> 
     <! COL-MD-4 --> 
     <div class="col-md-4"> 
      <div class="container"> 
       <div class="media"> 
        <div class="media-left"> 
         <a href="#"> 
          <img class="media-object" src="http://placehold.it/140x140" alt="..."> 
         </a> 
        </div> 
        <! MEDIA LEFT --> 
        <div class="media-body"> 
         <h4 class="media-heading">Media heading</h4> some texts 
        </div> 
        <! MEDIA BODY --> 
       </div> 
       <! MEDIA --> 

      </div> 
      <! CONTAINER --> 
     </div> 
     <! COL-MD-4 --> 
     <div class="col-md-4"> 
      <div class="container"> 
       <div class="media"> 
        <div class="media-left"> 
         <a href="#"> 
          <img class="media-object" src="http://placehold.it/140x140" alt="..."> 
         </a> 
        </div> 
        <! MEDIA LEFT --> 
        <div class="media-body"> 
         <h4 class="media-heading">Media heading</h4> some texts 
        </div> 
        <! MEDIA BODY --> 
       </div> 
       <! MEDIA --> 

      </div> 
      <! CONTAINER --> 
     </div> 
     <! COL-MD-4 --> 
    </div> 
    </div> 
<! ROW --> 
</div> 
    <! C-F --> 
    <script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
</body> 

</html>

私はちょうどcol-md-4でメディアオブジェクトの3列を作成しようとしていますが、私は間違っていますか？

出典

2017-02-18 Jordan Bos

でこれを置き換える（サイズ*の代わりに、あなたが与えなければなりません）。あなたが投稿しているものを明確にしてください。あなたが必要なものを正確に理解していませんでした！ – Venky

小型デバイスでは問題はありませんが（デバイス上の問題はありません）、デバイスの幅が990pxより大きい場合は水平方向にスクロールします –

<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
      </head><body> 
 
      <div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-md-4"> 
 
      
 
       <div class="media"> 
 
        <div class="media-left"> 
 
         <a href="#"> 
 
          <img class="media-object" src="http://placehold.it/140x140" alt="..."> 
 
         </a> 
 
        </div> 
 
        <!-- MEDIA LEFT --> 
 
        <div class="media-body"> 
 
         <h4 class="media-heading">Media heading</h4> some texts 
 
        </div> 
 
        <!-- MEDIA BODY --> 
 
       </div> 
 
       <!-- MEDIA --> 
 

 
      
 
      <!-- CONTAINER --> 
 
     </div> 
 
     <!-- COL-MD-4 --> 
 
     <div class="col-md-4"> 
 
      
 
       <div class="media"> 
 
        <div class="media-left"> 
 
         <a href="#"> 
 
          <img class="media-object" src="http://placehold.it/140x140" alt="..."> 
 
         </a> 
 
        </div> 
 
        <!-- MEDIA LEFT --> 
 
        <div class="media-body"> 
 
         <h4 class="media-heading">Media heading</h4> some texts 
 
        </div> 
 
        <!-- MEDIA BODY --> 
 
       </div> 
 
       <!-- MEDIA --> 
 

 
      
 
      <!-- CONTAINER --> 
 
     </div> 
 
     <!-- COL-MD-4 --> 
 
     <div class="col-md-4"> 
 
     
 
       <div class="media"> 
 
        <div class="media-left"> 
 
         <a href="#"> 
 
          <img class="media-object" src="http://placehold.it/140x140" alt="..."> 
 
         </a> 
 
        </div> 
 
        <!-- MEDIA LEFT --> 
 
        <div class="media-body"> 
 
         <h4 class="media-heading">Media heading</h4> some texts 
 
        </div> 
 
        <!-- MEDIA BODY --> 
 
       </div> 
 
       <!-- MEDIA --> 
 

 
     
 
      <!-- CONTAINER --> 
 
     </div> 
 
     <!-- COL-MD-4 --> 
 
    </div> 
 
    </div> 
 
<!-- ROW --> 
 
</div> 
 
      </body> 
 
      </html>

すべてのメディアオブジェクトから<div class="container>を削除します。それは問題を引き起こしている。

出典

2017-02-18 07:06:35 neophyte

ありがとうございます。 –

コンテナとしての@JordanBosは、ビューポートの幅、つまりデバイス画面の幅をとります。 – neophyte

メディアクラスオブジェクトの上にあるすべてのコンテナを削除します。 Bcozはページの全幅をとります。私のPCの幅：1170px;

出典

2017-02-18 07:12:21

col-xs-12とcol-md-12が必要なので、小さなサイズで正しく取得できます。したがって、行の全幅が必要です。 –

問題が大きい画面では、横スクロールが表示されており、bodyタグにoverflow-x：hiddenが使用されています。そのように参照してください：

<body style="overflow-x:hidden;"> 

/// all code stuffs 


</body>

出典

2017-02-18 07:25:51 KiranPurbey

問題はラップトップおよびデスクトップのために働くだろう、それはあなたが.COL-SM-を与えなければならない小型のデバイスでは動作しません画面解像度.COL-MD-4であります*

 <div class="col-md-4"></div> 
     <div class="col-md-4"></div> 
     <div class="col-md-4"></div>

は、私はほとんどあなたが言及したフィドルにスクロール見つからない

 <div class="col-md-4 col-sm-4"> 
     <div class="col-md-4 col-sm-4"> 
     <div class="col-md-4 col-sm-4">

出典

2017-02-18 07:26:26

なぜこの単純なブートストラップのコードが水平スクロールを引き起こすのですか？

答えて

関連する問題