Question

是否可以使用bootstrap

制作2个带有流体居中内容区域的固定宽度侧边栏

请查看屏幕截图链接，您可以查看我尝试过的代码。

<div class="container-fluid full-height no-padding">
<div class="row full-height no-margin">
    <div class="jumbotron" data-pages="parallax">
        <div class="container-fluid">
            <ul class="breadcrumb">
            </ul>
        </div>
    </div>
    <div class="col-sm-9 no-padding full-height">
        <div class="col-sm-2" id="resizable">
            <div class="" id="default-tree">
                <ul class="full-height" id="treeData" style="display: none;">
                </ul>
            </div>
        </div>
        <div class="col-sm-10 full-height">
            <div class="row files-row">
                <div class="col-xs-2 file-thumbnail">
                    <a href="#" class="thumbnail">
                        <img src="http://placehold.it/300x150" alt="...">
                        <label class="center-block">File name</label>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-3 no-padding full-height">
        <div class="bg-white full-height"></div>
    </div>
</div>

Layout screenshot

Answer 1

您可以查看以下链接。

http://jsfiddle.net/DUR6d/

  *
{
    margin:0;padding:0;
}
html,body
{
    width: 100%;
    height: 100%;
    background: #fff;
}
.main
{
    box-sizing:border-box;   

}
#leftSidebar {
    width: 80px;
    position: fixed;
    float:left;
    top: 0px;
    bottom: 0px;
    left: 0px;
    margin: 4px;
    box-sizing:border-box;
    background-color: gray;
}
#middle {   
    height: 100%;
    margin-left:88px;
    box-sizing:border-box;
}

#rightSidebar {
    position: fixed;
    top:0;
    right:0;
    height:100%;
    margin: 4px;
    box-sizing: border-box;
    background-color: gray;
}
#middle, #rightSidebar
{
    width: calc(50% - 40px);
}
article {
    width: 97%;
    height: 80px;
    margin: 4px 0;

    background-color: #ccc;
}

2个固定宽度的色谱柱和流体含量区域的自举

1 个答案: