如何用容器流体制成固定宽度的色谱柱?

问题描述：

我正在尝试在左侧使用固定宽度的边栏，然后在右侧使用普通的Bootstrap container-fluid.

I am trying have a side column on the left with fixed width, and then, on the right a normal Bootstrap container-fluid.

即使侧边栏不在Bootstrap结构内，也可以.我的意思是它不必与col-xx-xx类一起使用.

Even if the sidebar is not inside the Bootstrap structure, it is OK. I mean it hasn't to be with col-xx-xx class.

我所做的主要问题是我没有设法使流体容器停留在侧边栏旁边.

Whatever I do the main problem is that I don't manage to make the fluid container stays beside the sidebar.

重点还在于，如果我不显示任何侧边栏，则流体容器必须使用页面的整个宽度.

The point is also that if I display to none the sidebar, the fluid container has to use the full width of the page.

答

固定流体布局为

A fixed-fluid layout is possible in Bootstrap 3, but now that Bootstrap 4 is flexbox this layout is much easier. You just need to enable flexbox, and make a few simple adjustments to set the width of your fixed side column flex: 0 0 300px;, and then flex: 1; on your main column to fill remaining width...

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

这是最新的 Bootstrap 4 (默认为flexbox)的更简单的更新:

Here's a simpler update for the latest Bootstrap 4 which is flexbox by default:

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示例

如何用容器流体制成固定宽度的色谱柱?

相关推荐