不知道为什么引导列不会崩溃

Question

我用两行列制作了6的网格，并试图使它从大到小重新排列，从3重新排列到2到1。但我似乎无法做到这一点，我可以发誓，上次我使用引导程序来完成这个任务时，它已经开始工作了。当屏幕调整大小时，配置文件开始相互重叠。我试图做的是为每个分辨率添加一个css行，并增加宽度百分比，这似乎是可行的，但我觉得这不是一个干净的方法。

以下是代码：

<!-- Spotlight -->
<section id="spotlight">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="col-md-4">
         <div class="card card-3">
          <img src="http://convio.cancer.ca/mIFE/img/spotlight/man4.jpg">
           <h3>Xanthe</h3>
           <p>Inspired by the movie Tangled, Xanthe's goal was to grow her hair down to her ankles - but now wants to help cancer patients by donating her hair and raising funds to support the fight against cancer. Xanthe raised over $1,000 in honour of her
            cousin who is battling leukemia.
           </p>
         </div>
        </div>
        <div class="col-md-4">
         <div class="card card-3">
          <img src="http://convio.cancer.ca/mIFE/img/spotlight/man4.jpg">
          <h3>Team Gary</h3>
          <p>Team Gary recently ran in the Mississauga Marathon to support their Grandfather, Father and Family member Gary who is currently fighting liver cancer. The team of 13 raised an incredible $4,455 in the fight against cancer. Way to go Team Gary!</p>
        </div>
       </div>
        <div class="col-md-4">
         <div class="card card-3">
          <img src="http://convio.cancer.ca/mIFE/img/spotlight/man4.jpg">
          <h3>Johnny Blonde Kitchen</h3>
          <p>This year they were very excited to be opening a storefront location. They raised $1,300 by fundraising online, and donating 10% of sales from opening day. In addition to fundraising, Jonny cut off his famous locks and donated several inches
            to Locks Of Love. We are so excited to have them be a part of our CCS family!</p>
        </div>
      </div>
     </div>
    <div class="row">
        <div class="col-md-4">
         <div class="card card-3">
          <img src="http://convio.cancer.ca/mIFE/img/spotlight/man4.jpg">
          <h3>Brevitas Consulting</h3>
          <p>Brevitas Consulting takes on Breast Cancer Awareness Month each October with a walk-a-thon held one weekend during October bringing together their team in a fun, uplifting event. Thank you Brevitas!
          </p>
         </div>
        </div>
        <div class="col-md-4">
         <div class="card card-3">
          <img src="http://convio.cancer.ca/mIFE/img/spotlight/man4.jpg">
          <h3>Irudaya</h3>
          <p>These talented young women created and executed a two hour dance production; Journey: A Glimpse Into Tamil Cinema. With the Society being one of their charities of choice, these dancers raised $10,000 for the fight against cancer! Amazing work!</p>
         </div>
        </div>
        <div class="col-md-4">
         <div class="card card-3">
          <img src="http://convio.cancer.ca/mIFE/img/spotlight/man4.jpg">
          <h3>Maureen Parent</h3>
          <p>Maureen is a breast cancer survivor who is dedicate to raising funds for cancer research. In 10 years she has raised over $85,000 with an annual pasta dinner and has her sights set on raising $1,000,000 for the fight against breast cancer.</p>
        </div>
       </div>
    </div>
    <div class="row text-center">
      <div class="col-sm-12">
        <div class="col-sm-12">
         <div class="addPad">
          <p>Be a cancer fighter &nbsp; <a class="btn btn-primary btn-lg btn-padin" id="hideshow2">Get Started</a></p>
         </div>
        </div>
      </div>
    </div>
  </div>
</div>
</section>

​

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<!-- Spotlight -->
<section id="spotlight">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="col-md-4">
          <div class="card card-3">
            <img src="http://convio.cancer.ca/mIFE/img/spotlight/man4.jpg">
            <h3>Xanthe</h3>
            <p>Inspired by the movie Tangled, Xanthe's goal was to grow her hair down to her ankles - but now wants to help cancer patients by donating her hair and raising funds to support the fight against cancer. Xanthe raised over $1,000 in honour of
              her cousin who is battling leukemia.
            </p>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card card-3">
            <img src="http://convio.cancer.ca/mIFE/img/spotlight/man4.jpg">
            <h3>Team Gary</h3>
            <p>Team Gary recently ran in the Mississauga Marathon to support their Grandfather, Father and Family member Gary who is currently fighting liver cancer. The team of 13 raised an incredible $4,455 in the fight against cancer. Way to go Team Gary!</p>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card card-3">
            <img src="http://convio.cancer.ca/mIFE/img/spotlight/man4.jpg">
            <h3>Johnny Blonde Kitchen</h3>
            <p>This year they were very excited to be opening a storefront location. They raised $1,300 by fundraising online, and donating 10% of sales from opening day. In addition to fundraising, Jonny cut off his famous locks and donated several inches
              to Locks Of Love. We are so excited to have them be a part of our CCS family!</p>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-4">
          <div class="card card-3">
            <img src="http://convio.cancer.ca/mIFE/img/spotlight/man4.jpg">
            <h3>Brevitas Consulting</h3>
            <p>Brevitas Consulting takes on Breast Cancer Awareness Month each October with a walk-a-thon held one weekend during October bringing together their team in a fun, uplifting event. Thank you Brevitas!
            </p>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card card-3">
            <img src="http://convio.cancer.ca/mIFE/img/spotlight/man4.jpg">
            <h3>Irudaya</h3>
            <p>These talented young women created and executed a two hour dance production; Journey: A Glimpse Into Tamil Cinema. With the Society being one of their charities of choice, these dancers raised $10,000 for the fight against cancer! Amazing
              work!</p>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card card-3">
            <img src="http://convio.cancer.ca/mIFE/img/spotlight/man4.jpg">
            <h3>Maureen Parent</h3>
            <p>Maureen is a breast cancer survivor who is dedicate to raising funds for cancer research. In 10 years she has raised over $85,000 with an annual pasta dinner and has her sights set on raising $1,000,000 for the fight against breast cancer.</p>
          </div>
        </div>
      </div>
      <div class="row text-center">
        <div class="col-sm-12">
          <div class="col-sm-12">
            <div class="addPad">
              <p>Be a cancer fighter &nbsp; <a class="btn btn-primary btn-lg btn-padin" id="hideshow2">Get Started</a>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

​

为了让您更好地了解正在发生的事情，下面是屏幕达到991px时的屏幕截图

​

​

任何建议都是非常感谢的！耽误您时间，实在对不起

更新根据W3S对W3S进行了重构，仍然给了我同样的重叠问题。

<section id="spotlight">
  <div class="container">
       <div class="row">
        <div class="col-sm-4">
         <div class="card card-3">
          <img src="http://convio.cancer.ca/mIFE/img/spotlight/xanthe.jpg">
           <h3>Xanthe</h3>
           <p>  </p>
         </div>
        </div>
        <div class="col-sm-4">
         <div class="card card-3">
          <img src="http://convio.cancer.ca/mIFE/img/spotlight/TeamGary.jpg">
          <h3>Team Gary</h3>
          <p></p>
        </div>
       </div>
        <div class="col-sm-4">
         <div class="card card-3">
          <img src="http://convio.cancer.ca/mIFE/img/spotlight/Johnny.jpg">
          <h3>Johnny Blonde Kitchen</h3>
          <p></p>
        </div>
      </div>
     </div>
       <div class="row">
        <div class="col-sm-4">
         <div class="card card-3">
          <img src="http://convio.cancer.ca/mIFE/img/spotlight/Brevitas.jpg">
          <h3>Brevitas Consulting</h3>
          <p></p>
         </div>
        </div>
        <div class="col-sm-4">
         <div class="card card-3">
          <img src="http://convio.cancer.ca/mIFE/img/spotlight/irudaya.jpg">
          <h3>Irudaya</h3>
          <p></p>
         </div>
        </div>
        <div class="col-sm-4">
         <div class="card card-3">
          <img src="http://convio.cancer.ca/mIFE/img/spotlight/MaureenParent.jpg">
          <h3>Maureen Parent</h3>
          <p></p>
        </div>
       </div>
    </div>
    <div class="row text-center">
      <div class="col-sm-12">
        <div class="col-sm-12">
         <div class="addPad">
          <p>Be a cancer fighter &nbsp; <a class="btn btn-primary btn-lg btn-padin" id="hideshow2">Get Started</a></p>
         </div>
        </div>
      </div>
    </div>
</div>
</section>

Answer 1

这里的问题是图像。将class=“img响应”添加到图像标记中，它将为您修复它。在一定宽度下，图像大小比列宽大，因而重叠。