固定宽度列，在引导程序中带有容器流体

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

我试图找到一个解决方案，在左边有一个固定宽度的侧柱，然后，在右边一个正常的bootstrap容器 - 流体。

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.

即使侧边栏不在引导结构内，也没关系。我的意思是它不能与col-xx-xx类一起使用。

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.

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

2 个解决方案

#1

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 3中可以使用固定流体布局，但现在Bootstrap 4是flexbox，这种布局更容易。您只需要启用flexbox，并进行一些简单的调整以设置固定侧列flex的宽度：0 0 300px;，然后flex：1;在您的主列上填充剩余宽度...

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

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

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

这是最新的Bootstrap 4的更新，默认情况下是flexbox：

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

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>

Also see: How to build a 2 Column (Fixed - Fluid) Layout with Twitter Bootstrap?

另请参阅：如何使用Twitter Bootstrap构建2列（固定流体）布局？

Update 2018 Bootstrap 4.0.0 example

更新2018 Bootstrap 4.0.0示例

#2

Try including your container-fluid in a div with margin-left: 200px (where 200px is your sidebar's width).

尝试将容器流体包含在带有margin-left的div中：200px（其中200px是侧边栏的宽度）。

Then position your sidebar with position: absolute for instance

然后将您的侧边栏放在位置：绝对位置

#1