引导:如何显示四个内容块而不会相互碰撞

Question

我正在使用 Bootstrap 构建一个网站，并且此页面上至少有四个内容块，这些内容块不应该相互碰撞。

以下是 HTML 代码：

<h3>Meet our Team</h3>
<div class="staff col-md-6">
<div class="portrait col-md-5">
  <img class="img-responsive" src="http://dev.davids.emarketsouth.com/images/tmp-portrait.jpg" alt="David Reeves">
</div>
<div class="mini-bio col-md-7">
    <h4>David Reeves</h4>
    <span class="position">Owner/Operator</span>
    <p>A Savannah resident for over 40 years, David graduated from the University of Georgia with a degree&#8230;
    <p class="read-more"><a href="/about-us/staff/david-reeves">read more...</a></p>
</div><!-- /.mini-bio -->
</div><!-- /.staff -->
<div class="staff col-md-6">
<div class="portrait col-md-5">
  <img class="img-responsive" src="http://dev.davids.emarketsouth.com/images/temp-portrait.jpg" alt="Morgan McGhie">
</div>
<div class="mini-bio col-md-7">
    <h4>Morgan McGhie</h4>
    <span class="position">Vice President</span>
    <p>Morgan, a Savannah native and daughter to David, joined the business in 2008.</p>
    <p class="read-more"><a href="/about-us/staff/morgan-mcghie">read more...</a></p>
</div><!-- /.mini-bio -->
</div><!-- /.staff -->
<div class="staff col-md-6">
<div class="portrait col-md-5">
  <img class="img-responsive" src="http://dev.davids.emarketsouth.com/images/temp-portrait.jpg" alt="Tim Faught">
</div>
<div class="mini-bio col-md-7">
    <h4>Tim Faught</h4>
    <span class="position">General Manager</span>
    <p>Tim oversees our daily operations and staff as our General Manager. </p>
    <p class="read-more"><a href="/about-us/staff/tim-faught">read more...</a></p>
</div><!-- /.mini-bio -->
</div><!-- /.staff -->
<div class="staff col-md-6">
<div class="portrait col-md-5">
  <img class="img-responsive" src="http://dev.davids.emarketsouth.com/images/temp-portrait.jpg" alt="Davena NaDell">
</div>
<div class="mini-bio col-md-7">
    <h4>Davena NaDell</h4>
    <span class="position">Customer Service Manager</span>
     <p>Davena focuses on staff development and customer relations as our Customer Service Manager.</p> 
    <p class="read-more"><a href="/about-us/staff/davena-nadell">read more...</a></p>
</div><!-- /.mini-bio -->
</div><!-- /.staff -->

这是 css：

.staff  { min-height: 230px; padding: 15px; margin-bottom: 20px; background-color: #eff8ea;  }

理想情况下，每个块之间应该有一些喘息空间。

Answer 1

最简单的解决方案是将列包装在<div class="row">容器中，然后将staff类和实际内容移动到新的<div class="staff">容器中。

<div class="row">
   <div class="col-md-6">
      <div class="staff">
        <div class="portrait col-md-5"></div>
        <div class="mini-bio col-md-7"></div>
      </div>
   </div>
   <div class="col-md-6">
      <div class="staff">
        <div class="portrait col-md-5"></div>
        <div class="mini-bio col-md-7"></div>
      </div>
   </div>
</div>