在 Bootstrap 3 中使用“可变宽度内容”网格答案

【问题标题】：Use "Variable width content" grid in Bootstrap 3在 Bootstrap 3 中使用“可变宽度内容”网格
【发布时间】：2018-05-28 12:17:11
【问题描述】：

我目前使用的是 Bootstrap 3.3.7，因为我的网站很大，所以迁移到 v4 并不容易。尽管如此，我还是想使用新的自动布局列（可变宽度内容）功能（见下面的屏幕截图）。

有人有解决方法的想法吗？

<div class="container-fluid">
    <div class="row">
      <div class="col-xs-6 col-xs-push-3 col-md-3">Fixed 250px</div>
      <div class="col-xs-6 col-xs-pull-3 col-md-3">Auto</div>
      <div class="col-xs-6 col-md-3">Auto</div>
      <div class="col-xs-6 col-md-3">Auto</div>
    </div>   
</div>

【问题讨论】：

自动布局列使用 flexbox。到目前为止，您尝试过什么来实现这一目标？您能发布一个 3.x 代码的最小示例吗？
@ZimSystem 已编辑：见上文
谢谢，固定宽度 col 的 CSS 在哪里？

标签： twitter-bootstrap grid bootstrap-4

【解决方案1】：

您可以添加使自动布局列在 Bootstrap 4 中工作的 flexbox CSS...

CSS：

.d-flex {
    display:flex;
}
.d-flex>div {
    float: none;
}
.col-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
}

用法：

<div class="container">
    <div class="row d-flex">
        <div class="col-sm-3 bg-success">col-sm-3</div>
        <div class="col-auto">col-auto</div>
        <div class="col-sm-9 bg-success">col-sm-3</div>
    </div>
</div>

演示：
https://www.codeply.com/go/cTTtpuItaM

【讨论】：