Question

我有三个带有文本和背景色的列。当窗口变小时，三个列变得太小，但我希望它们彼此放置。我该如何做出回应？

我尝试将三个cols放在一行类中，但是背景颜色却得到扩展

<div class="col-xs-4">
   <div class="textbox">
      <p> Text </p>
   </div>
</div>
<div class="col-xs-4">
   <div class="textbox">
      <p> Text</p>
   </div>
</div>
<div class="col-xs-4">
   <div class="textbox">
      <p>Text</p>
   </div>
</div>

.textbox {
    min-height: 490px;
    background: #F6F6F6;
    padding: 0 28px;
    word-break: break-word;
}

我希望三个文本框在它们变得太小时彼此放置

Answer 1

我不太了解您要在这里做什么，但是听起来好像您希望在浏览器变小时将您的列堆叠起来。在这种情况下，由于您使用的是Bootstrap，因此建议您使用flexbox类，如下所示：

<div class="d-flex flex-wrap">
  <div class="textbox">
    <p> Text </p>
  </div>
  <div class="textbox">
    <p> Text</p>
  </div>
  <div class="textbox">
    <p>Text</p>
  </div>
</div>

这是Bootstrap documentation on flexbox。

此外，这是一个很棒的guide for using native CSS flexbox属性。

希望有帮助！

响应容器太小时彼此之间不能

1 个答案: