我对引导程序的网格布局有疑问。当我将屏幕大小调整为较小的布局时，我的列彼此重叠。
我不确定问题是什么。
这是正在发生的事情的图片：
这是我的代码
<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="[email protected]" 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 -->
根据引导文档，对于每个.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="[email protected]" 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>