Question

我正在尝试在左边有一个固定宽度的侧栏，然后在右边有一个正常的Bootstrap container-fluid。

即使侧边栏不在Bootstrap结构内，也没关系。我的意思是它没有col-xx-xx类。

无论我做什么，主要的问题是我没有设法让流体容器停留在侧边栏旁边。

关键是如果我没有侧边栏显示，流体容器必须使用页面的整个宽度。

Answer 1

固定流体布局为possible in Bootstrap 3，但现在 Bootstrap 4 是flexbox，这种布局更容易。您只需要启用flexbox，并进行一些简单的调整，以设置固定侧柱flex: 0 0 300px;的宽度，然后在主列上设置flex: 1;以填充剩余宽度......

Bootstrap 4 Alpha 2 http://codeply.com/go/eAYKvDkiGw

以下是最新的 Bootstrap 4 的简单更新，默认情况下是flexbox：

Bootstrap 4 Alpha 6或Beta http://codeply.com/go/V9UQrvLWwz

 @media (min-width: 576px) {
     .sidebar {
          max-width: 280px;
     }
 }

<div class="container-fluid">
    <div class="row flex-nowrap">
        <div class="col-md-4 col-12 sidebar">

        </div>
        <div class="col-md col-12 main">
            <h2>Main (fluid width...)</h2>
        </div>
    </div>
</div>

另见：How to build a 2 Column (Fixed - Fluid) Layout with Twitter Bootstrap?

更新2018年 Bootstrap 4.0.0 example

Answer 2

尝试将container-fluid包含在div margin-left: 200px中（其中200px是侧边栏的宽度）。

然后将您的侧边栏设置为position: absolute例如

如何使用容器流体制作固定宽度的色谱柱？

2 个答案: