了解 Twitter Bootstrap 2 的响应式布局,可以通过以下步骤实现:
<div class="container">
<div class="row">
<div class="col-md-1">Content</div>
<div class="col-md-1">Content</div>
<div class="col-md-1">Content</div>
<div class="col-md-1">Content</div>
<div class="col-md-1">Content</div>
<div class="col-md-1">Content</div>
<div class="col-md-1">Content</div>
<div class="col-md-1">Content</div>
<div class="col-md-1">Content</div>
<div class="col-md-1">Content</div>
<div class="col-md-1">Content</div>
<div class="col-md-1">Content</div>
<div class="col-md-1">Content</div>
<div class="col-md-1">Content</div>
</div>
</div>
.container {
margin-right: auto;
margin-left: auto;
}
.row {
margin-bottom: -15px;
}
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12 {
padding-left: 15px;
padding-right: 15px;
}
$(document).ready(function () {
// 隐藏导航栏的固定定位
setNavbarPosition();
});
function setNavbarPosition() {
var navbarHeight = $('.navbar').height();
var contentHeight = $('.content').height();
var offset = contentHeight - navbarHeight;
$('.navbar').css('margin-top', offset);
}
通过这些步骤,您可以实现 Twitter Bootstrap 2 的 16 列响应式布局。
领取专属 10元无门槛券
手把手带您无忧上云