引导 3 框布局无响应答案

【问题标题】：bootstrap 3 box layout not responsive引导 3 框布局无响应
【发布时间】：2021-05-01 17:28:54
【问题描述】：

我正在尝试制作一个在宽屏幕上并排有 3 个框的 bootstrap4 布局，但如果屏幕变薄，我希望红色/绿色框始终彼此相邻，而最右侧的蓝色框在这张图片中移动到前两个框下方：

我是 bootstrap4 列布局的新手，我一直在努力实现这一目标，但我当前正在进行的代码没有我想要的响应能力：

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>



<div class="container">
    <div class="row">
        <div style="background:red" class="col-md-3">
          TEXT1 <br>
          TEXT1 <br>
          TEXT1 <br>
          TEXT1 <br>
          TEXT1 <br>
          TEXT1 <br>
          
        </div>
        <div style="background:green" class="col-md-3">
          TEXT2 <br>
          TEXT2 <br>
          TEXT2 <br>
          TEXT2 <br>
          TEXT2 <br>
          TEXT2 <br>
          TEXT2 <br>
          
        </div>
        <div style="background:blue" class="col-md-3">
          TEXT3 <br>
          TEXT3 <br>
          TEXT3 <br>
        </div>
      </div>
</div>

非常感谢任何帮助，谢谢

【问题讨论】：

标签： javascript html css bootstrap-4 responsive-design

【解决方案1】：

您可以将多个col-* 类添加到您的元素中。这样您就可以为不同的屏幕尺寸设置多种不同的布局。

例如，您需要在较小的屏幕上并排显示 2 列和 1 个全宽。 Bootstrap 被认为是移动优先，所以从较小的布局开始，然后逐步向上。最小的屏幕列用col-* 定义（没有任何sm 或md 等）。

<div class="col-6"></div>
<div class="col-6"></div>
<div class="col-12"></div>

从最小屏幕尺寸到最大屏幕尺寸，这两列各为1/2。第三个 div 将是宽度的1/1。现在，为了使您的布局更加复杂，您可以为元素添加类，例如让它们在更大的屏幕上变成一行宽度的1/3。

<div class="col-6 col-md-4"></div>
<div class="col-6 col-md-4"></div>
<div class="col-md-4"></div>

这会将所有三列放在大屏幕上的一行中。它们都是1/3 宽度，因此它们可以组合在一起。请注意，col-12 已被删除。这是因为当屏幕小于断点时，col-md-4 将暗示使用col-12。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="container">
  <div class="row">
    <div style="background:red" class="col-6 col-md-4">
      TEXT1 <br> TEXT1 <br> TEXT1 <br> TEXT1 <br> TEXT1 <br> TEXT1 <br>

    </div>
    <div style="background:green" class="col-6 col-md-4">
      TEXT2 <br> TEXT2 <br> TEXT2 <br> TEXT2 <br> TEXT2 <br> TEXT2 <br> TEXT2 <br>

    </div>
    <div style="background:blue" class="col-md-3">
      TEXT3 <br> TEXT3 <br> TEXT3 <br>
    </div>
  </div>
</div>

如果您有任何问题，请在下方评论。

【讨论】：