爲什麼這個簡單的bootstrap代碼會導致水平滾動？

我是一個新手，以引導，我試圖建立與它有3列的媒體對象，但我的代碼，原因是水平滾動：
這是我JS提琴鏈接：http://jsfiddle.net/5ea98ytm/
這裏是我的代碼：爲什麼這個簡單的bootstrap代碼會導致水平滾動？

<!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佔用頁面的整個寬度。在我的電腦寬度：1170px;

來源

2017-02-18 07:12:21

因爲它需要col-xs-12和col-md-12，所以可以在小尺寸上正確使用它。所以它需要整行的寬度。 –

如果你的問題是在大屏幕上，它顯示水平滾動，然後使用overflow-x：隱藏在body標籤中。看到這樣的：

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

/// all code stuffs 


</body>

來源

2017-02-18 07:25:51 KiranPurbey

問題是與屏幕分辨率.COL-MD-4將用於筆記本電腦和臺式機的工作，它不會爲你必須給.COL-SM-較小的設備上工作*（代替*的大小，你必須給）

 <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

爲什麼這個簡單的bootstrap代碼會導致水平滾動？

回答

相關問題