首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Bootstrap 3.0 -包含固定列大小的流体网格

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

Stack Overflow用户
提问于 2013-10-08 02:13:59
回答 4查看 142.6K关注 0票数 127

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

代码语言:javascript
复制
---------------------------------------------------------------------------
|       |       |                                                         |
|       |       |                                                         |
| 240px | 160px | All Remaining Width of the Window                       |
|       |       |                                                         |
|       |       |                                                         |
--------------------------------------------------------------------------|

此网格需要占据整个窗口的高度。据我所知,我需要混合固定和流动的宽度。然而,Bootstrap 3.0似乎不再有fluid类。即使是这样,我似乎也想不出如何混合流体和固定的柱大小。有人知道如何在Bootstrap 3.0中做到这一点吗?

EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2013-10-08 04:21:28

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

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

票数 32
EN

Stack Overflow用户

发布于 2014-05-03 04:04:46

或将显示属性与表格单元一起使用;

css

代码语言:javascript
复制
.table-layout {
    display:table;
    width:100%;
}
.table-layout .table-cell {
    display:table-cell;
    border:solid 1px #ccc;
}

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

html

代码语言:javascript
复制
<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/

票数 26
EN

Stack Overflow用户

发布于 2016-05-31 22:43:52

好的,我的回答非常好:

代码语言:javascript
复制
<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 playground

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

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/19231742

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档