Question

我正在使用Bootstrap并使用类col-md-6。在左栏中我有一个图像，在右栏中我有两段文字。当我缩小网络浏览器（或使用移动设备）时，我希望div扩展，而不是使用滚动条。现在最终发生的是图像显示正常但我必须使用滚动条来查看文本的段落。

抱歉，我对网络编程很陌生，花了很多时间试图弄清楚我做错了什么。不确定它是否相关，但我还要在问题发生后包括下一段代码。

我希望它从pg4滚动到pg5，但我不想要额外的滚动条来查看pg4中的所有内容。

编辑：也觉得我应该注意到我在这里发布了类似的问题，并尝试了许多这些问题的答案，但还没有任何工作。

<div id="pg4">
  <div class="container">
    <h1 class="text-center text-uppercase">About Me</h1><hr/>
    <div class="row">
      <div class="col-md-6">
        <img src="IMAGE" class="center-block img-responsive" id="picture" alt="Picture" />
      </div>
      <div class="col-md-6">
        <p>PARAGRAPH 1</p>
        <p>PARAGRAPH 2</p>
      </div>
    </div>
  </div>
</div>

<div id="pg5">
</div>

/* PG 4 */
#pg4 {
  background-color: #282E34;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  display: block;
  top: 250%;
  overflow: auto;
}

#pg4 p {
  color: white;
  text-align: left;
  font-size: 20px;
  margin-left: 3%;
  margin-right: 5%;
  margin-bottom: 10%;
  color: #6c6d6e;
}

#p1 {
  margin-top: 15%;
}

#picture {
  width: 45%;
  margin-top: 15%;
}

/* PG 5 */
#pg5 {
  background-image: url("IMAGE");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 350%;
  overflow: auto;
}

Answer 1

尝试向div添加其他类

<div class="row">
  <div class="col-md-6 col-sm-6 col-xs-6 col-lg-6">
    <img src="IMAGE" class="center-block img-responsive" id="picture" alt="Picture" />
  </div>
  <div class="col-md-6 col-sm-6 col-xs-6 col-lg-6">
    <p>PARAGRAPH 1</p>
    <p>PARAGRAPH 2</p>
  </div>
</div>

像这样。

如果您没有指定col-xs-?默认引导程序堆叠您的div，它的行为类似于col-xs-12。大型显示器也是如此。因此，您需要为超小型和大型显示器指定宽度

从那一部分开始：

#picture {
 width: 45%;
 margin-top: 15%;
}

删除您已定义width: 45%

的img-responsive

Answer 2

为元素设置height和overflow: auto时，表示您希望此元素可滚动。如果您不想这样做，而不是height: 100%设置height: auto;

如何在引导程序中使div扩展而不是使用滚动条？

2 个答案: