Question

我已经使用两行和列制作了一个6格的网格，当屏幕从大到小调整大小时，它重新排列为3到2到1.但我似乎无法做到这一点，我可以在最后一次使用bootstrap时发誓它正在工作。当屏幕调整大小时，配置文件开始相互重叠。我试图做的是为每个分辨率添加一条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对HTML进行重组，仍然给出了相同的重叠问题。

<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-responsive”添加到图片代码中，它应该为您修复它。在某个宽度，图像大小比列宽大，因此它重叠。

无法弄清楚为什么bootstrap列不会崩溃

1 个答案: