我应该如何实现基于固定和基于百分比的布局响应的bootstrap？

Question

+-----------+----------------------------------+
|           |                                  |
|           |                                  |
|216px fixed|  percentage based layout here    |
|           |                                  |
|           |                                  |
|           |                                  |
|           |                                  |
|           |                                  |
+-----------+----------------------------------+

我怎么能用这个？

<div id="left" class="span"></div>
<div id="right" class"span12"></div><!--or if span9--- that wouldn't fit exactly-->

Answer 1

这是一个css解决方案：

.wrapper
{
    min-height:100%;
    width:100%;
    position:relative;
    background-color:Black;
    display:inline-block;
}
.sidebar
{
    width:216px;
    top:0px;
    left:0px;
    bottom:0px;
    position:absolute;
    background-color:Aqua;
}
.content
{
    width:calc(100% - 216px);
    position:relative;
    background-color:Gray;
    float:right;
}

我使用解决方案进行了更新：

<div class="wrapper">
<div class="sidebar hidden-phone">
</div>
<div class="content">

It will work according to the content
    <br/>It will work according to the content
    <br/>
</div>

http://jsfiddle.net/DppA8/20/

您可以阅读更多关于替代方案的更多兼容性：

css width: calc(100% -100px); alternative using jquery

致以最诚挚的问候，