在Bootstrap 3

Question

我目前正在使用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>

Answer 1

您可以添加使自动布局列在Bootstrap 4 ...

中工作的flexbox CSS

<强> CSS：

router

<强>用法：

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

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

相关：Bootstrap 3.0 - Fluid Grid that includes Fixed Column Sizes