Question

调整浏览器大小时，段落不会遵循新的屏幕大小和限制。我不确定问题是在段落中还是在后台。我认为高度和宽度有问题。这是我的网站图片：

这是代码：

＆＃13;

html,
body {
  height: 100%;
  background-image: url(http://oi64.tinypic.com/1zf1keu.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
#cont {
  width: 100%;
}
#main {
  margin-top: 35%;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<body>

  <div class="container" id="cont">


    <div class="row" id="main">
      <div class="  col-md-4 col-sm-12">
        <a href="http://www.w3schools.com">

          <h2>Paragraph 1</h2>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
            </p>

        </a>
      </div>

      <div class="  col-md-4 col-sm-12">
        <a href="#">
          <h2>Paragraph 2</h2>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
            </p>

        </a>
      </div>

      <div class=" col-md-4 col-sm-12">
        <a href="#">
          <h2>Paragraph 3</h2>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
            </p>

        </a>
      </div>

    </div>

  </div>
</body>

＆＃13;

Answer 1

这是你想要的吗？

html,
body {
  height: 100%;
  background-image: url(http://oi64.tinypic.com/1zf1keu.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
#cont {
  width: 100%;
}
#main {
  margin-top: 35%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<body>

  <div class="container" id="cont">


    <div class="row" id="main">
      <div class="  col-md-4 col-sm-12">
        <a href="http://www.w3schools.com">

          <h2>Paragraph 1</h2>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
            <p>

        </a>
      </div>

      <div class="  col-md-4 col-sm-12">
        <a href="#">
          <h2>Paragraph 2</h2>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
            <p>

        </a>
      </div>

      <div class=" col-md-4 col-sm-12">
        <a href="#">
          <h2>Paragraph 3</h2>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
            <p>

        </a>
      </div>

    </div>

  </div>
</body>

调整浏览器大小时限制的段落

1 个答案: