如何使用Bootstrap实现流体固定流体三柱布局？

Question

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

（How）这可以在使用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>

但它是不的解决方案。因此，如果有人知道引导程序符合方式，请随时发布。