Twitter bootstrap Bootstrap 3.0-包含固定列大小的流体网格

我正在学习如何使用引导。目前，我正在费力地浏览布局。虽然Bootstrap很酷，但我看到的一切似乎都过时了。在我的生活中，我有一个我认为是基本的布局，我无法理解。我的布局如下所示：

---------------------------------------------------------------------------
|       |       |                                                         |
|       |       |                                                         |
| 240px | 160px | All Remaining Width of the Window                       |
|       |       |                                                         |
|       |       |                                                         |
--------------------------------------------------------------------------|

---

这个网格需要占据整个窗户的高度。根据我的理解，我需要混合固定宽度和流体宽度。然而，Bootstrap3.0似乎不再具有流体类。即使是这样，我似乎也不知道如何混合流体和固定柱尺寸。有人知道如何在Bootstrap 3.0中做到这一点吗？

在Bootstrap 3中混合流体和固定宽度确实不容易。它的本意是这样的，因为网格系统被设计成一个流动的、响应迅速的东西。你可以尝试破解一些东西，但这与响应网格系统的尝试背道而驰，其目的是让布局在不同的设备类型之间流动

---

如果你需要坚持这个布局，我会考虑用自定义CSS布局你的页面，而不是使用网格。

< P>为什么不把左边的两列设置为你自己的CSS中的一个，然后为其余的内容做一个新的12个列的网格布局？

<div class="row">
    <div class="fixed-1">Left 1</div>
    <div class="fixed-2">Left 2</div>
    <div class="row">
        <div class="col-md-1"></div>
        <div class="col-md-11"></div>
    </div>
</div>

左1
左2

更新2014-11-14： 下面的解决方案太旧了，我建议使用flex box布局方法。以下是概述：

---

我的解决方案

html

无需修改太多引导布局代码

---

更新（非OP）：在下面添加代码片段以便于理解此答案。但它似乎并不像预期的那样起作用

ul{
列表样式：无；
}
.世界其他地区{
位置：相对位置；
高度：20px；
}
上校cw{
位置：绝对位置；
排名：0；
背景色：rgba（150150150.5）；
}
.行cw消息列表{
右边填充：270px；
}
.col cw名称{
宽度：50%；
背景色：rgba（150,0,0,5）；
}
.col cw关键字{
宽度：50%；
背景色：rgba（0,150,0,5）；
}
钟沛林议员的答覆{
宽度：140px；
右：130px；
背景色：rgba（0,0,150,5）；
}
.cw行动{
宽度：130px；
右：0；
背景色：rgba（150,150,0,5）；
}

名称
关键词
回复
行动


名称
关键词
回复
行动

或对表格单元格使用显示属性

css

html

固定宽度div

流体宽度div

编辑：由于很多人似乎都想这样做，我在这里写了一个简短的指南，其中有一个更通用的用例。希望能有帮助

bootstrap3网格系统支持行嵌套，允许您调整根行以允许固定宽度的侧菜单

您需要在根行上留下一个填充，然后有一个子行，其中包含正常的网格布局元素

我通常是这样做的

html

---

我有一个稍微不同的问题：

• 我需要将固定列和流动列组合为表的一部分，而不是整个窗口布局的一部分
• 我需要在左侧和右侧都安装立柱
• 我并不担心使用包含行的整个高度的列背景

因此，我对左右列使用了

float

to，然后可以使用Bootstrap的

row

来处理中间的流体列

<div>
    <div class="pull-left" style="width:240px">Fixed 240px</div>
    <div class="pull-right" style="width:120px">Fixed 120px</div>
    <div style="margin-left:240px;margin-right:120px">
        <div class="row" style="margin:0px">
            Standard grid system content here
        </div>
    </div>
</div>

固定240像素
固定120像素
此处为标准网格系统内容

2018年更新

在我看来，在Bootstrap 3中实现这一点的最佳方法是使用与Bootstrap的断点对齐的媒体查询，以便在较大屏幕上只使用固定宽度列，然后在较小屏幕上相应地堆叠布局。这样你就保持了反应能力

@media (min-width:768px) {
  #sidebar {
      width: inherit;
      min-width: 240px;
      max-width: 240px;
      min-height: 100%;
      position:relative;
  }
  #sidebar2 {
      min-width: 160px;
      max-width: 160px;
      min-height: 100%;
      position:relative;
  }
  #main {
      width:calc(100% - 400px);
  }
}

---

Bootstrap 4将具有flexbox，这样的布局将更容易：

好的，我的答案非常好：

<style>
    #wrapper {
        display:flex;    
        width:100%;
        align-content: streach;
        justify-content: space-between;
    }    

    #wrapper div {
        height:100px;
    }

    .static240 {
        flex: 0 0 240px;
    }
    .static160 {
        flex: 0 0 160px;
    }

    .growMax {
        flex-grow: 1;
    }

</style>

<div id="wrapper">
  <div class="static240" style="background:red;" > </div>
  <div class="static160"  style="background: green;" > </div> 
  <div class="growMax"  style="background:yellow;"  ></div>
</div>

#包装纸{
显示器：flex；
宽度：100%；
对齐内容：streach；
证明内容：之间的空间；
}    
#包装部{
高度：100px；
}
.240{
flex:0240px；
}
.160{
flex:0160px；
}
格罗马克斯先生{
柔性生长：1；
}

---

如果您想支持所有浏览器，请使用

我想这类功能必须等待Flexbox获得完全支持，但它仍然很差劲。当列数是静态的时，Bootstrap的模型非常好，但是，例如，如果您可以动态隐藏和显示列，那么支持至少一列是流动的将变得更有意义。请编辑您的答案，在解决方案中包含对此链接的引用。注意：看看如何在行和列旁边使用表。这里有一个固定的示例，用于引导3:-1这个答案对我来说没有任何意义。列的总和不等于12。名称和键盘列重叠。我不明白它怎么会有+2票。这个很好，但是如果你把它放在固定的列中，例如这个

或引导下拉列表，那么它们在固定的列中就不起作用了。有什么解决办法吗？@Vaclavilias试着用position:relative和dropdown在里面放一个全尺寸的diff？如果你制作一个JSFIDLE来显示这个问题，它会很有帮助。我还不知道这在所有浏览器中是如何工作的，但是，做得好，做得好。有没有办法对右侧的固定列执行此操作？

position:fixed

意味着在滚动时，该列的内容会浮在页面的其余部分之上。在我的例子中，我使用

position:absolute

修复了它

<div class="table-layout">
    <div class="table-cell fixed-width-200">
        <p>fixed width div</p>
    </div>
    <div class="table-cell">
        <p>fluid width div</p>    
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col-fixed-240">Fixed 240px</div>
        <div class="col-fixed-160">Fixed 160px</div>
        <div class="col-md-12 col-offset-400">
            <div class="row">
            Standard grid system content here
            </div>
        </div>
    </div>
</div>

.col-fixed-240{
    width:240px;
    background:red;
    position:fixed;
    height:100%;
    z-index:1;
}

.col-fixed-160{
    margin-left:240px;
    width:160px;
    background:blue;
    position:fixed;
    height:100%;
    z-index:1;
}

.col-offset-400{
    padding-left:415px;
    z-index:0;
}

<div>
    <div class="pull-left" style="width:240px">Fixed 240px</div>
    <div class="pull-right" style="width:120px">Fixed 120px</div>
    <div style="margin-left:240px;margin-right:120px">
        <div class="row" style="margin:0px">
            Standard grid system content here
        </div>
    </div>
</div>

@media (min-width:768px) {
  #sidebar {
      width: inherit;
      min-width: 240px;
      max-width: 240px;
      min-height: 100%;
      position:relative;
  }
  #sidebar2 {
      min-width: 160px;
      max-width: 160px;
      min-height: 100%;
      position:relative;
  }
  #main {
      width:calc(100% - 400px);
  }
}

<style>
    #wrapper {
        display:flex;    
        width:100%;
        align-content: streach;
        justify-content: space-between;
    }    

    #wrapper div {
        height:100px;
    }

    .static240 {
        flex: 0 0 240px;
    }
    .static160 {
        flex: 0 0 160px;
    }

    .growMax {
        flex-grow: 1;
    }

</style>

<div id="wrapper">
  <div class="static240" style="background:red;" > </div>
  <div class="static160"  style="background: green;" > </div> 
  <div class="growMax"  style="background:yellow;"  ></div>
</div>