html - 推特 Bootstrap 缩略图方向切换与视口(viewport)

标签 html css twitter-bootstrap

我正在使用 Twitter bootstrap,并且在页面底部有 3 个缩略图,但是随着视口(viewport)缩小到 768 像素以下,它们从水平排列变为垂直排列。我怎样才能阻止它?

这是我正在使用的 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

最佳答案

bootstrap-responsive.css 行号 835 float:none;制造问题

.thumbnails > li {
    float: none;
    margin-left: 0;
    }

关于html - 推特 Bootstrap 缩略图方向切换与视口(viewport),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16196687/

相关文章:

javascript - modal 和 ng-bind-html 的问题

jQuery 迭代 HTML5 表格

html - Div 试图居中但不起作用

php - 将样式从 PHP 移动到头部

html - Wordpress 22 为图像添加额外的边距

html - Bootstrap 3.2 全 Angular 布局没有水平滚动问题

css - 是否可以使用 Angular 2 的 ViewEncapsulation.Native 为不同的 Web 组件设置不同的 "rem"?

javascript - 如何让一行中每个单词的字母大写?

java - 如何使用 Thymeleaf 在 Spring Boot 应用程序中正确缓存数据

html - Chrome 在低 DPI 和高 DPI 显示器上以不同方式重绘滚动条上的 div