Question

在Bootstrap 3中，您可以使用以下代码构建一个包含3列的行，当屏幕宽度减小时，这些行会相互折叠：

<div class = 'row'>
    <div class = 'col-md-4'>
         Some text
    </div>
    <div class = 'col-md-4'>
         Some text
    </div>
    <div class = 'col-md-4'>
         Some text
    </div>
</div>

我现在正在开展一个项目，我想要达到同样的效果，但无需加载Bootstrap。

Bootstrap如何实现堆叠＆＃39;你会从上面得到什么影响？

Answer 1

基本思想是列的宽度适用于百分比。因此，在您的示例中，每列的宽度可能为33.333％，然后您使用媒体查询以某个分辨率表示项目的宽度发生变化，并且它们会停止浮动或者您希望在较小分辨率上执行的任何其他操作。< / p>

以下是媒体查询的示例，其中任何分辨率最大宽度为767px的设备都会受到影响。

@media (max-width: 767px) {

    .col-md-4 {
        width: 100%;
        float: none;
    }

}

这是Ethan Marcotte撰写的精彩文章，他非常赞赏我们现在所知的响应式网页设计：

http://alistapart.com/article/responsive-web-design/

随着宽度减小，Twitter Bootstrap如何实现自动列堆叠？

1 个答案: