带有容器流体的固定宽度柱

Question

我试图找到一个解决方案,在左边有一个固定宽度的侧栏,然后,在右边一个正常的Bootstrap container-fluid.

即使侧边栏不在Bootstrap结构内,也没关系.我的意思是它不是和col-xx-xx班级有关.

无论我做什么,主要问题是我无法使流体容器停留在侧边栏旁边.

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

Answer 1

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>

另请参阅:如何使用Twitter Bootstrap构建2列(固定 - 流体)布局？

更新2018 Bootstrap 4.0.0示例