我应该如何使用固定和基于百分比的布局实现引导响应

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）; 替代使用 jquery

此致敬意