css - 我应该如何使用固定布局和基于百分比的布局来实现 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;
}

我用一个解决方案更新了一个 fiddle :

<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

最好的问候，