引導列重疊

Question

引導程序的網格佈局有問題。當我將屏幕調整爲較小的佈局時，我的列彼此重疊。

我不確定是什麼問題。

這裏是正在發生的事情的一個畫面：

這裏是我的代碼

<div class='container-fluid'> 

    <div class="row"> <!-- 1 --> 
    <div class="col-sm-5 col-md-4"> 
     <h1>JOHN SMITH</h1> 
    </div> 
    </div> 

    <div class='row'> <!-- 2 --> 
    <div class="col-sm-5 col-md-4"> 
     <h2>VULCAN FLATBED</h2> 
    </div> 
    </div> 

    <div class="row"> <!-- 3 --> 
    <div class="col-sm-4 col-md-4 col-lg-4" style="background-color:yellow;"> 

     <div class='row'> 
      <img src="vulcan.jpg" alt="vehicle image" width='391'/> 
     </div> 
     <div class='row'> 
     <button type='submit'> 
      <img src="book_now_button@2x.png" alt="book now"> 
     </button> 
     </div> 

    </div> 

    <div class="col-sm-8 col-md-8 col-lg-8" style="background-color:pink;"> <!-- RIGHT SIDE --> 

     <div class='row'> 

     <h3>CAN HELP WITH</h3> 
     <p>LIFTING & YARD WORK</p> 
     </div> 
     <div class='row'> 
     <h3>AVAILABLE</h3> 
     <p>ALL WEEKENDS</p> 
     </div> 
     <div class='row'> 
     <h3>NOTE</h3> 
     <p>HI, MY NAME IS JOHN AND I HAVE A GREAT TRUCK FOR TRANSPORTING CARS, 
     WORK MATTERIAL, OR HEAVY OBJECTS. I HAVE A FULL TIME JOB SO I CAN 
     ONLY HELP YOU ON THE WEEKENDS. I LOVE WORKING WITH MY HANDS SO IF YOU 
     SOME HELP WITH LIFTING OR YARDWORK I AM YOUR GUY. BOOK NOW TO CONTACT 
     ME AND LET ME HELP YOU OUT. 
     </p> 
     </div> 
    </div> 
    </div> <!-- end 3 --> 

    <hr> 
</div> <!-- end wrap --> 

Answer 1

根據Bootstrap Docs，對於每個.row，您需要有一個.col-*-*作爲直接孩子，但您在其中的一些中沒有。這導致溢出。

另外不要使用html標籤width，它已被棄用。使用class="img-responsive"從引導到實現max-width:100%

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class='container-fluid'> 
 
    <div class="row"> 
 
    <!-- 1 --> 
 
    <div class="col-sm-5 col-md-4"> 
 
     <h1>JOHN SMITH</h1> 
 
    </div> 
 
    </div> 
 
    <div class='row'> 
 
    <!-- 2 --> 
 
    <div class="col-sm-5 col-md-4"> 
 
     <h2>VULCAN FLATBED</h2> 
 
    </div> 
 
    </div> 
 

 
    <div class="row"> 
 
    <!-- 3 --> 
 
    <div class="col-sm-4 col-md-4 col-lg-4" style="background-color:yellow;"> 
 

 
     <div class='row'> 
 
     <div class="col-xs-12"> 
 
      <img class="img-responsive" src="//lorempixel.com/500/200" alt="vehicle image" /> 
 
     </div> 
 
     </div> 
 
     <div class='row'> 
 
     <div class="col-xs-12"> 
 
      <button type='submit'> 
 
      <img src="book_now_button@2x.png" alt="book now"> 
 
      </button> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-sm-8 col-md-8 col-lg-8" style="background-color:pink;"> 
 
     <!-- RIGHT SIDE --> 
 

 
     <div class='row'> 
 
     <div class="col-xs-12"> 
 
      <h3>CAN HELP WITH</h3> 
 
      <p>LIFTING & YARD WORK</p> 
 
     </div> 
 
     </div> 
 
     <div class='row'> 
 
     <div class="col-xs-12"> 
 
      <h3>AVAILABLE</h3> 
 
      <p>ALL WEEKENDS</p> 
 
     </div> 
 
     </div> 
 
     <div class='row'> 
 
     <div class="col-xs-12"> 
 
      <h3>NOTE</h3> 
 
      <p>HI, MY NAME IS JOHN AND I HAVE A GREAT TRUCK FOR TRANSPORTING CARS, WORK MATTERIAL, OR HEAVY OBJECTS. I HAVE A FULL TIME JOB SO I CAN ONLY HELP YOU ON THE WEEKENDS. I LOVE WORKING WITH MY HANDS SO IF YOU SOME HELP WITH LIFTING OR YARDWORK I 
 
      AM YOUR GUY. BOOK NOW TO CONTACT ME AND LET ME HELP YOU OUT. 
 
      </p> 
 
     </div> 
 
     </div> 
 
    </div>

Answer 2

我相信你的問題是，你必須與「行」類的許多元素那裏沒有任何列。層次結構進入容器>行>列。如果沒有列，就不需要將任何內容聲明爲行，並且在沒有列的情況下以不同尋常的方式影響佈局。

另一個問題是你的形象。刪除「width」屬性，並添加以下class屬性：class =「img-responsive」。有關詳細信息，請參閱bootstrap文檔的Images section。