我正在使用twitter bootstrap并在页面底部有3个缩略图,但是当视口缩小到768px以下时,它们会从水平排列变为垂直排列。我怎么能阻止这个?
这是我正在使用的HTML。
<div class="container">
<div class="row-fluid">
<ul class="thumbnails noMargin offset5 bottomPage">
<li>
<a href="#" class="thumbnail"><img src="http://placehold.it/45x45"></a>
</li>
<li>
<a href="#" class="thumbnail"><img src="http://placehold.it/45x45"></a>
</li>
<li>
<a href="#" class="thumbnail"><img src="http://placehold.it/45x45"></a>
</li>
</ul>
</div>
</div>
这是我添加的自定义CSS
<style>
.noMargin > li {
margin-bottom: 0;
margin-left: 0;
}
body {
padding-top: 65px;
}
.bottomPage{
position: fixed;
bottom: 5px;
}
</style>
显示问题的js bin。 http://jsbin.com/opezov/1/edit
答案 0 :(得分:1)
bootstrap-responsive.css line no 835 float:none;创造问题
.thumbnails > li {
float: none;
margin-left: 0;
}
答案 1 :(得分:0)
删除
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
如果您不需要在网页上提供响应,请修复此问题。
否则请参阅Bootstap文档以防止响应行为发生(如果可能,不确定)。