Bootstrap 4 - 浮动列答案

【问题标题】：Bootstrap 4 - floating columnsBootstrap 4 - 浮动列
【发布时间】：2018-09-18 21:08:57
【问题描述】：

我正在寻找 Bootstrap 4 中的解决方案，如何实现将 3x 列放在一行中，由于第一列内容，其他两列将与其平行显示。 Bootstrap 4 使用 Flex 来处理行和列。请不要提供将 Col1 在一个容器中拆分，将 Col2 和 Col3 在另一个容器中拆分的解决方案。我正在使用不同的视图模式，需要灵活地按列宽调整位置。例如。如果 Col3 = col-12 应该把它放在 Col1 和 Col2 的下面。

（仅供参考，在 Bootstrap 3 中，此功能运行良好，因为存在浮动和 % 列宽）。提前谢谢你。

【问题讨论】：

这听起来像 Bootstrap 4 不是实现目标的正确工具。如果你想使用基于 flexbox 的网格系统，你还必须定义行行为。在 Bootstrap 4 文档中，尚不清楚这是否可以仅使用类名来完成。
@feeela 我希望通过添加一些属性来实现我的行为，从而保持原始功能。感谢您的帮助。
检查 metafizzy 同位素 - 这对我来说听起来像是砖石布局
到目前为止你有什么代码？请将其包含在问题中。
确实，浮动或 CSS-Grid 将是最佳方法，但 OP 需要明确需要什么级别的支持。

标签： css flexbox bootstrap-4

【解决方案1】：

您可以使用一些简单的 CSS 让 bootstrap 4 以您熟悉的方式工作。这是一个示例，它使用浮点数为您提供所需的结果，而无需将列放在单独的容器中：http://jsfiddle.net/nyx6e4bf/1/

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-3">
      <p>
        Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
      </p>
    </div>
    <div class="col-9">
      <p>
        Lorem Ipsum
      </p>
    </div>
    <div class="col-9">
      <p>
        Lorem Ipsum
      </p>
    </div>
  </div>
</div>

.container .row {
  display: block;
}

.row>div:nth-of-type(1) {
  background-color: red;
  float: left;
}

.row>div:nth-of-type(2) {
  background-color: blue;
  float: right;
}

.row>div:nth-of-type(3) {
  background-color: green;
  float: right;
}

除非您想更改 Bootstrap 在整个网站上的工作方式，否则您的 CSS 必须比我的更具体。

我不确定您是否可以在不更改 CSS 的情况下真正实现您想要的。 Flex-box 并不是真的要解决这个问题。您还可以研究网格布局，因为这可能会提供解决方案。

【讨论】：

感谢您的帮助。到目前为止，我还只发现了这种使用块而不是 flex 和浮动（大部分是左侧）框的后备解决方案。如果找不到基于 flex 的解决方案，这也是我的方法。
@Francis 没有将列包装在另一个元素中我 99% 确定您无法通过 flexbox 实现您想要的。这是关于 flexbox 的一个很好的指南：css-tricks.com/snippets/css/a-guide-to-flexbox