ブートストラップカラムが重複する

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タグを使用しないでください。このタグは非推奨です。あなたがイメージ小枝の問題を表示することができます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を参照してください。