ete*_*rps 39 html css twitter-bootstrap
我在Twitter Bootstrap中使用了2列流体布局.左列是主要内容(span10),右列是小部件的侧边栏(span2).目前,在调整浏览器窗口大小时,Bootstrap会通过创建一个列来响应,最左边的部分位于顶部,最右边的部分位于底部.我反过来喜欢它.
这是我的html的要点:
<body>
<div id="content" class="container-fluid">
<div id="content-row-1" class="row-fluid">
<div id="mainContainer" class="span10"> Lots of content goes here </div>
<div id="sidebar" class="span2"> Widgets </div>
</div> <!-- content-row-1 -->
</div> <!-- content -->
</body>
mainContainer左侧是否有任何方法可以在宽窗口中显示右侧的小部件,但是sidebar当窗口缩小时会对齐顶部？
kon*_*nqi 31
在bootstrap 3中,这是通过网格列排序完成的(参见bootstrap 3文档)
例
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>
如果有足够的空间,这将显示div较低的上方div.如果屏幕尺寸减小,鞋帮div将保持不变.
And*_*ich 27
今天回答了一个类似于这个的问题,你可以在这里看到它,它基本上归结为通过将其向右浮动并补偿内容区域的左边距然后重置浮动来移动侧边栏的流量带有@media查询的侧栏的属性,再次使用引导样式表中的默认值来容纳侧栏.
CSS
body {
padding-top: 60px;
padding-bottom: 40px;
}
.sidebar-nav {
padding: 9px 0;
}
#sidebar {
float:right;
}
#content {
margin-left: 0;
}
@media (max-width: 767px) {
#sidebar {
float:none;
}
}
我以一种非常简单的方式来解决这个问题.不需要@media和百分比:
因此,您可以将右侧边栏放在桌面右侧,也可以放在移动设备顶部.
例:
--- HTML
<div id="content" class="container-fluid">
<div id="content-row-1" class="row-fluid">
<div id="sidebar" class="span2 pull-right"> Widgets </div>
<div id="mainContainer" class="span10 pull-left"> Lots of content goes here </div>
</div> <!-- content-row-1 -->
</div> <!-- content -->
--- CSS
div#sidebar, div#mainContainer {
margin-left: 0;
}
| 归档时间： |
|
| 查看次数： |
33918 次 |
| 最近记录： |