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

Question

我正在学习如何使用 Bootstrap。目前，我正在涉足布局。虽然 Bootstrap 很酷，但我看到的一切似乎都过时了。对于我的生活，我有一个我认为是我无法弄清楚的基本布局。我的布局如下所示：

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

这个网格需要占据窗口的整个高度。据我了解，我需要混合固定宽度和流体宽度。但是，Bootstrap 3.0 似乎不再具有流体类。即使这样做了，我似乎也无法弄清楚如何混合流体和固定柱尺寸。有谁知道如何在 Bootstrap 3.0 中做到这一点？

score 152 · Accepted Answer

edit: As lots of people seem to want to do this, I have written up a short guide with a more general use case here https://www.atlascode.com/bootstrap-fixed-width-sidebars/. Hope it helps.

The bootstrap3 grid system supports row nesting which allows you to adjust the root row to allow fixed width side menus.

You need to put in a padding-left on the root row, then have a child row which contains your normal grid layout elements.

Here is how I usually do this http://jsfiddle.net/u9gjjebj/

html

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

css

.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;
}

score 31 · Accepted Answer

用 Bootstrap 3 混合流动和固定宽度真的没有简单的方法。它的意思是这样的，因为网格系统被设计成一个流动的、响应式的东西。你可以尝试修改一些东西，但这会与响应网格系统试图做的事情背道而驰，其目的是让布局在不同的设备类型之间流动。

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

score 26 · Accepted Answer

或使用带有表格单元格的显示属性；

css

.table-layout {
    display:table;
    width:100%;
}
.table-layout .table-cell {
    display:table-cell;
    border:solid 1px #ccc;
}

.fixed-width-200 {
    width:200px;
}

html

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

http://jsfiddle.net/DnGDz/

score 21 · Accepted Answer

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

我需要将固定列和流动列组合为表格的一部分，而不是作为全窗口布局的一部分
我需要将列固定在左侧和右侧
我不担心使用包含行的全高的列背景

结果，我求助于float左右列，然后可以使用 Bootstraprow来做中间的流体列。

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

score 15 · Accepted Answer

2018 年更新

IMO，在 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);
  }
}

Working Bootstrap Fixed-Fluid Demo

Bootstrap 4将具有 flexbox，因此这样的布局会更容易： http: //www.codeply.com/go/eAYKvDkiGw

score 3 · Accepted Answer

好的，我的回答非常好：

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

jsfiddle游乐场

如果您想支持所有浏览器，请使用https://github.com/10up/flexibility

score 1 · Accepted Answer

更新 2014-11-14：下面的解决方案太旧了，我建议使用 flex box 布局方法。这是一个概述： http: //learnlayout.com/flexbox.html

我的解决方案

html

<li class="grid-list-header row-cw row-cw-msg-list ...">
  <div class="col-md-1 col-cw col-cw-name">
  <div class="col-md-1 col-cw col-cw-keyword">
  <div class="col-md-1 col-cw col-cw-reply">
  <div class="col-md-1 col-cw col-cw-action">
</li>

<li class="grid-list-item row-cw row-cw-msg-list ...">
  <div class="col-md-1 col-cw col-cw-name">
  <div class="col-md-1 col-cw col-cw-keyword">
  <div class="col-md-1 col-cw col-cw-reply">
  <div class="col-md-1 col-cw col-cw-action">
</li>

scss

.row-cw {
  position: relative;
}

.col-cw {
  position: absolute;
  top: 0;
}


.ir-msg-list {

  $col-reply-width: 140px;
  $col-action-width: 130px;

  .row-cw-msg-list {
    padding-right: $col-reply-width + $col-action-width;
  }

  .col-cw-name {
    width: 50%;
  }

  .col-cw-keyword {
    width: 50%;
  }

  .col-cw-reply {
    width: $col-reply-width;
    right: $col-action-width;
  }

  .col-cw-action {
    width: $col-action-width;
    right: 0;
  }
}

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

更新（不是来自 OP）：在下面添加代码片段以方便理解这个答案。但它似乎没有按预期工作。

ul {
  list-style: none;
}
.row-cw {
  position: relative;
  height: 20px;
}
.col-cw {
  position: absolute;
  top: 0;
  background-color: rgba(150, 150, 150, .5);
}
.row-cw-msg-list {
  padding-right: 270px;
}
.col-cw-name {
  width: 50%;
  background-color: rgba(150, 0, 0, .5);
}
.col-cw-keyword {
  width: 50%;
  background-color: rgba(0, 150, 0, .5);
}
.col-cw-reply {
  width: 140px;
  right: 130px;
  background-color: rgba(0, 0, 150, .5);
}
.col-cw-action {
  width: 130px;
  right: 0;
  background-color: rgba(150, 150, 0, .5);
}

<ul class="ir-msg-list">
  <li class="grid-list-header row-cw row-cw-msg-list">
    <div class="col-md-1 col-cw col-cw-name">name</div>
    <div class="col-md-1 col-cw col-cw-keyword">keyword</div>
    <div class="col-md-1 col-cw col-cw-reply">reply</div>
    <div class="col-md-1 col-cw col-cw-action">action</div>
  </li>

  <li class="grid-list-item row-cw row-cw-msg-list">
    <div class="col-md-1 col-cw col-cw-name">name</div>
    <div class="col-md-1 col-cw col-cw-keyword">keyword</div>
    <div class="col-md-1 col-cw col-cw-reply">reply</div>
    <div class="col-md-1 col-cw col-cw-action">action</div>
  </li>
</ul>

score -3 · Accepted Answer

为什么不在您自己的 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>

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

8 回答 8

html

scss

Related

Reference