使用“可变宽度内容"Bootstrap 3中的网格 [英] Use "Variable width content" grid in Bootstrap 3

问题描述

我目前正在使用Bootstrap 3.3.7，由于我的网站很大，因此迁移到v4并不容易.尽管如此，我还是想使用新的自动布局列"(可变宽度内容)功能(请参见下面的屏幕截图).

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>

推荐答案

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

You could add the flexbox CSS that makes the auto-layout columns work in Bootstrap 4...

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-包含以下内容的流体网格固定列大小

这篇关于使用“可变宽度内容"Bootstrap 3中的网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！