부트 스트랩 열이 중복됩니다.

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을 사용하지 않으므로 더 이상 사용되지 않습니다. 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

나는 당신의 문제는 당신이 "행"클래스 많은 요소를 가지고있다 생각 그 (것)들에 어떤 란도 없다. 계층 구조는 container> row> col입니다. 열이 없으면 아무 것도 행으로 선언 할 필요가 없으며 레이아웃이 레이아웃이없는 특별한 방법으로 영향을줍니다.

또 다른 문제는 사용자의 이미지입니다. "width"속성을 제거하고 다음 클래스 속성을 추가하십시오 : class = "img-responsive". 자세한 내용은 부트 스트랩 문서의 Images section을 참조하십시오.