Bootstrap 3.0-包括固定列大小的流体网格


126

我正在学习如何使用Bootstrap。目前,我正在遍历布局。虽然Bootstrap很酷,但我看到的一切似乎都过时了。对于我的一生,我有一个我无法弄清的基本布局。我的布局如下所示:

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

该网格需要占据窗口的整个高度。根据我的理解,我需要混合固定宽度和流体宽度。但是,Bootstrap 3.0似乎不再具有流畅的类。即使这样做,我似乎也无法弄清楚如何混合流体尺寸和固定色谱柱尺寸。有谁知道如何在Bootstrap 3.0中执行此操作?


研究在行和列旁边使用表。
kalu 2014年

这是Bootstrap 3的固定流体示例:codeply.com/go/GN4QinVrjI
Zim,

Answers:


32

使用Bootstrap 3确实没有简单的方法来混合可变宽度和固定宽度。这就是因为网格系统被设计为可变的,可响应的东西,因此就像这样。您可以尝试破解某些东西,但这会与响应式网格系统试图做的事情背道而驰,其目的是使布局跨不同的设备类型流动。

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


5
我猜这种事情将不得不等待Flexbox的全面支持,但这仍然很la脚。当列数是静态的时,Bootstrap的模型很好,但是,例如,如果您可以动态隐藏和显示列,那么至少支持一列的流畅性就变得更加有意义。
Nate Bundy 2013年

1
请编辑您的答案,以在解决方案中包含对此链接的引用。问候:stackoverflow.com/questions/8740779/...
莫蒂

151

编辑:由于很多人似乎想这样做,因此我在https://www.atlascode.com/bootstrap-fixed-width-sidebars/上编写了一个简短的指南,其中包含了更一般的用例。希望能帮助到你。

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

您需要在根行的左侧添加一个填充,然后有一个包含常规网格布局元素的子行。

这是我通常的操作方法 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;
}

这很好,但是如果您将其放在固定列中,例如<p> <a class="btn btn-default" href="#" role="button">查看详细信息&raquo; </a> </ p>或Bootstrap下拉菜单,则它们在固定列中不起作用。有没有解决办法?
瓦茨拉夫·埃里亚斯

@VaclavElias尝试在其中放置一个全尺寸差异,其位置为:relative,然后是下拉列表?如果您做一个jsfiddle来显示问题会有所帮助
w00t

我还没有看到它在所有浏览器中如何工作,但是除此之外,做得很好,做得很好。
Phil Cooper

有没有办法用右侧的固定柱子做到这一点?
肖恩

3
position: fixed表示在滚动时该列的内容浮动在页面其余部分的上方。就我而言,我使用修复了它position: absolute
劳伦特

26

或将显示属性与table-cell一起使用;

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


1
问题,当你在使用前是。`.visible-xs , becouse 显示:表格单元变为 display:block...
Dariusz Filipiak '16

21

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

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

结果,我求助于float左右列,然后可以使用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>

4
@Schemetrical我没有问题。我解释说我遇到了一个稍有不同的问题,并添加了我用来帮助其他从Google来到这里的其他人的解决方案。
帕迪·曼

1
您的答案非常宝贵。很简单,却解决了我的问题。非常感谢。
查尔斯

为什么不能给行div包含答案中包含的div的边距?
GreenAsJade

这个答案很合法。如果您需要利用引导程序列,但又不希望它们在某些屏幕宽度下折叠,这就是您所需要的(例如,使用pull-left / pull-right而不是col-md-3)。
山姆

这似乎是一个很好的答案。我marginpadding我中间的行遇到了一些麻烦,但这应该是可以解决的问题。采取这种方法会有哪些意想不到的后果?
维沙尔'18

15

更新于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


3

好的,我的回答非常好:

<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


1

更新2014-11-14:下面的解决方案太旧了,我建议使用弹性框布局方法。以下是概述: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>

脚本

.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):在下面添加代码段,以帮助理解此答案。但是它似乎没有按预期工作。


-1这个答案对我来说没有任何意义。列的总数不超过12。名称和键盘列重叠。我不知道它如何获得+2票。
Mariano Desanze 2014年

-3

为什么不只在自己的CSS中将左侧的两列设置为fixed,然后为其余内容创建一个完整的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>

在Bootstrap中,只有列可以是行的直接子代。
塞巴迪卡卡2015年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.