Question

我是Bootstrap和CSS的新手。帮助一个新手。当它最大化时，我有一个我想要的布局，但是当我将它重新调整为更小的尺寸时，文本会重叠它上面的图像。非常感激您的帮忙。这是我的代码：

<section id="work" class="container">
  <div class="page-header">
    <h1 class="text-center">My Work</h1>
  </div>
  <div class="text-center">
    <img src="images/portfolio1.jpg" class="img-thumbnail">
    <img src="images/portfolio2.jpg" class="img-thumbnail">
    <img src="images/portfolio3.jpg" class="img-thumbnail">
    <img src="images/portfolio4.jpg" class="img-thumbnail">
    <img src="images/portfolio2.jpg" class="img-thumbnail">
    <img src="images/portfolio1.jpg" class="img-thumbnail">
  </div>
</section>

<section id="about" class="container">
  <h2 class="text-center">About Me</h2>
  <div class="col-text text-justify">
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
    sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
    incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate
    velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
  </div>
  <br>
  <div class="row">
    <div class="col-md-6">
      <div class="panel panel-primary">
        <div class="panel-heading">
          <h4>Web Designing </h4>
        </div>
        <div class="panel-body text-justify">
          <img src="images/webdesign.jpg" class="img-thumbnail center-block">
          <p class="lead text-center">
            Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
          </p>
        </div>
        <div class="panel-footer"></div>
      </div>
    </div>

    <div class="col-md-6">
      <div class="panel panel-primary">
        <div class="panel-heading">
          <h4>Web Designing</h4>
        </div>
        <div class="panel-body text-justify">
          <img src="images/webdesign.jpg" class="img-thumbnail center-block">
          <p class="lead text-center">
            Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
          </p>
        </div>
        <div class="panel-footer"></div>
      </div>
    </div>
  </div>
</section>

Answer 1

问题是你需要将每个图像包装在一个引导列中，以便它们正确调整大小而不会相互干扰。

<div class="row">
  <div class="col-md-6">
    <img src="images/portfolio1.jpg"  class="img-thumbnail">
  </div>
  <div class="col-md-6">
    <img src="images/portfolio2.jpg"  class="img-thumbnail">
  </div>
  <div class="col-md-6">
    <img src="images/portfolio3.jpg"  class="img-thumbnail">
  </div>
  <div class="col-md-6">
    <img src="images/portfolio4.jpg"  class="img-thumbnail">
  </div>
  <div class="col-md-6">
    <img src="images/portfolio1.jpg"  class="img-thumbnail">
  </div>
  <div class="col-md-6">
    <img src="images/portfolio2.jpg"  class="img-thumbnail">
  </div>
</div>

文本在调整Bootstrap大小时重叠图像

1 个答案: