html - 如何用Bootstrap实现流体-固定-流体三列布局？

Question

在一个元素中，我需要实现一个 3 列布局，中间有一个固定大小的列，另外两个列的宽度可变(每个 min = 100px 和 max =/100% - 500px)/2):

(如何)这可以在使用 Twitter Bootstrap 上实现吗？

Answer 1

Bootstrap 似乎没有提供工具来实现这种混合的固定流体布局。必须使用这样的解决方法(找到 here ，另请参阅 http://jsfiddle.net/kizu/UUzE9/ ):

CSS

#main {
    min-width: 500px;
    padding: 0 500px 0 0;
    white-space: nowrap;
    overflow: hidden;
}

.main-column {
    position: relative;
    display: inline-block;
    vertical-align: top;
}

#main-column-left {
    width: 50%;
    background: #00FFB4;
}
#main-column-middle {
    width: 500px;
    background: #434343;
}
#main-column-right {
    width: 50%;
    background: #FF9000;
}

.content {
    white-space: normal;
}

HTML

<div id="main">
    <div class="main-column" id="main-column-left"><div class="content">
        Lorem ipsum dolor sit amet...
    </div></div>
    <div class="main-column" id="main-column-middle"><div class="content">
        Lorem ipsum dolor sit amet...
    </div></div>
    <div class="main-column" id="main-column-right"><div class="content">
        Lorem ipsum dolor sit amet...
    </div></div>
</div>

但这不是解决方案。因此，如果有人知道 Bootstrap 符合方式，请随时发布。