如何使用容器流体制作固定宽度的列? [英] How to make a fixed width column with a container-fluid?

问题描述

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

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

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

还有一点是，如果我不显示侧边栏，则流体容器必须使用页面的整个宽度.

解决方案

fixed-fluid 布局是 可能在 Bootstrap 3 中，但是现在 Bootstrap 4 是 flexbox 这种布局更容易.你只需要启用flexbox，并做一些简单的调整来设置你的固定边栏的宽度flex: 0 0 300px;，然后flex: 1;您的主列填充剩余宽度...

引导程序 4 Alpha 2http://codeply.com/go/eAYKvDkiGw

这是最新的 Bootstrap 4 的一个更简单的更新，默认情况下是 flexbox:

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

 @media (min-width: 576px) {.侧边栏{最大宽度:280px；}}<div class="container-fluid"><div class="row flex-nowrap"><div class="col-md-4 col-12 侧边栏">

<div class="col-md col-12 main"><h2>主要(流体宽度...)</h2>

另见:如何使用 Twitter Bootstrap 构建一个 2 列(固定 - 流体)布局?

2018 年更新Bootstrap 4.0.0 示例

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

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

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

Bootstrap 4 Alpha 6 or 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?

Update 2018 Bootstrap 4.0.0 example

这篇关于如何使用容器流体制作固定宽度的列?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！