Question

我正在编写我的第一个基于Bootstrap 3的网站，我有以下几点。如您所见，对于大型和中型设备，我需要3列，而对于超小型设备，我需要1列。但对于小型设备，我需要2列，第三列位于底部，占据整行。下面的代码不起作用，对于中型设备，仅显示蓝色div。我怎样才能使我的设计有效？还是有另一种更好的方法吗？

＆＃13;

<div class="container">
    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="background-color:red; height:120px;">

        </div>

        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="background-color:green; height:120px;">

        </div>

        <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12" style="background-color:blue; height:120px;">

        </div>

    </div>
</div>

＆＃13;

Answer 1

首先要让bootstrap CSS工作，您需要在文档的bootstrap stylesheet部分添加<head>。

其次，更改从xs开始到lg的引导类语句的顺序。

这有效：

注意：运行底部的代码段，点击全屏链接并调整浏览器窗口大小以查看效果。

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4" style="background-color:red; height:120px;">

        </div>

        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4" style="background-color:green; height:120px;">

        </div>

        <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4" style="background-color:blue; height:120px;">

        </div>

    </div>
</div>

＆＃13;

如何在Bootstrap中组织不同设备大小的列

1 个答案: