html - 响应式容器太小时不在彼此之间

Question

我有三个带有文本和背景颜色的列。当窗口变小时，三个列变得太细，但我希望它们彼此放置。我如何使它具有响应性？

我尝试将三个列放在一个行类中，但背景颜色越来越长

<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属性。

希望对您有所帮助!