响应中的固定列和响应列的混合

Question

是否可以使用 last bootstrap 3 在响应列中创建固定（-宽度）和非固定（-宽度）列的混合？

原因：我想在小屏幕上折叠固定侧边栏。

Answer 1

你一定可以做到，试试这个 (bootstrap3)

    <div class="container-custom row">

    <div class="side-bar">Menu</div>

    <div class="content">responsive Content part
<div class="container"><div class="col-md-12"></div></div>
</div>

    </div>

.Container-custom{
margin: 0px;
padding: 0px;
position: relative;
height: 100%;
}

.side-bar{
display: inline-block;
float: left;
position: relative;
width: 250px;
}

.content{
margin-left: 250px;
min-height: 1006px;
margin-top: 0px;
padding: 0px;
background-color: #e5e9ec;
overflow: auto;
position: relative;
}

Answer 2

下面是一个应该对您有所帮助的示例：

http://bootply.com/9Efmu4rR07

基本上，您在列布局之外使用包装器，并使用绝对位置在较大的屏幕上相应地定位侧边栏；在较小的屏幕上折叠边栏。

响应中的固定列和响应列的混合

Mix of fixed and responsive columns inside responsive

css

twitter-bootstrap-3