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

Question

I'm currently using Bootstrap 3.3.7 and because my site is huge it isn't easy to migrate to v4. Nevertheless I'd like to use the new Auto-Layout-columns (Variable width content) feature (see screenshot below).

Has anybody an idea for a workaround?

<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：

.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

相关：Bootstrap 3.0 - 包含固定列大小的流体网格