如何使引导列缩小到其内容的大小

Question

我有一个引导列，我想缩小到其内容的高度，以便另一列可以填充它下面的空间。这是我所指的图像：

我希望将第一列（包含两个 col-1 框）缩小到其内容的高度，以便“最后一个”框可以填充空间。

Codepen link

.box {
  background-color: green;
  margin: 5px;
  padding: 25px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <div class="col-12 col-md-8 col-lg-9">
      <div class="box">col-1</div>
      <div class="box">col-1</div>
    </div>
    <div class="col-12 col-md-4 col-lg-3">
      <div class="box">col-2</div>
      <div class="box">col-2</div>
      <div class="box">col-2</div>
    </div>
    <div class="col-12 col-md-8 col-lg-9">
      <div class="box">last</div>
    </div>
  </div>
</div>

注意：我最初只是将第 3 个引导列作为第一列的子列，但由于页面上的制表符的工作方式而不得不离开它。我需要它从 col-1 到 col-2 再到 col-3，最后一个。

Answer 1

您不能“缩小”网格布局中一列的大小而不影响其他列，因此我们需要分解您想要实现的目标。您正在尝试处理 3 个不同的订单：

• 大屏幕上的视觉顺序：col-1、last、col-2
• 手机上的视觉订单：col-1, col-2, last
• 所有屏幕上的标签顺序：col-1、col-2、last

移动顺序和tab顺序是一样的（而且没有JS我们也不能响应式改变tab顺序），所以我们以此作为我们展示的基础。

然后我们希望last 在大屏幕上被定位之前 col-2 的第三个元素，但在移动设备上之后，所以我们需要让那些2 个元素相对于彼此起作用，而不是作为其他列的一部分。

工作示例 - 我添加了inputs 以查看标签顺序。 （在整页中运行以查看列）

.box {
  background-color: green;
  margin: 5px 5px 0;
  padding: 25px;
}

input { width: 30px; } /* For demo only */

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <div class="col-12 col-md-8 col-lg-9">
      <div class="box"><input placeholder="1"> col-1</div>
      <div class="box"><input placeholder="2"> col-1 </div>
    </div>
    <div class="col-12 col-md-4 col-lg-3">
      <div class="box"><input placeholder="3"> col-2</div>
      <div class="box"><input placeholder="4"> col-2</div>
    </div>
    <div class="col-12 col-md-4 col-lg-3 order-md-last">
      <div class="box order-1"><input placeholder="5"> col-3</div>
    </div>
    <div class="col-12 col-md-8 col-lg-9">
      <div class="box"><input placeholder="6"> last</div>
    </div>
  </div>
</div>

这是如何工作的：

1.将来自col-2 的第三个元素放在它自己的列col-3 中，该列与col-2 具有相同的类，因此它看起来与在col-2 中时完全相同。它的显示也与移动屏幕上的完全一样。但是现在它也可以独立于col-2移动。

2。移动大屏幕上的位置。上面的步骤使它出现在last 列之前，所以我们可以使用Bootstrap's order classes。只需将order-md-last 添加到col-3 即可使其最后出现在屏幕上md 断点上方：

    <div class="col-12 col-md-4 col-lg-3 order-md-last">
      <div class="box order-1"><input placeholder="5"> col-3</div>
    </div>