Question

我试图在大屏幕上制作它有4列，中等屏幕有2列，在一个额外的小屏幕上只有1.大而小的工作，但我假设媒体不仅仅是因为col-6 4次会使它成为24而不是12列。这是我的代码：

<div class="row">
            <div class="col-xs-12 col-med-6 col-lg-3">
                <img src="http://www.martinezcreativegroup.com/wp-content/uploads/2014/05/img-placeholder.png">
            </div>
            <div class="col-xs-12 col-med-6 col-lg-3">
                <img src="http://www.martinezcreativegroup.com/wp-content/uploads/2014/05/img-placeholder.png">
            </div>
            <div class="col-xs-12 col-med-6 col-lg-3">
                <img src="http://www.martinezcreativegroup.com/wp-content/uploads/2014/05/img-placeholder.png">
            </div>
            <div class="col-xs-12 col-med-6 col-lg-3">
                <img src="http://www.martinezcreativegroup.com/wp-content/uploads/2014/05/img-placeholder.png">
            </div>
</div>

我如何才能使这项工作成为中间列只有2列？

Answer 1

您使用了错误的等级用于中等屏幕尺寸。它应该是col-md-6而不是col-med-6

如果你声明4列col-md-6，它将重新排列列，使前两个（总共12个）占据第一行，接下来的两个将排列在第二行。

Answer 2

您的方法是正确的，您只得到中列列类名错误，它应该是：col-md-6。（Bootstrap docs）

Answer 3

col-md-6不是col-med-6。请修复此类名，然后它将起作用。

Answer 4

您可以使用解决方案https://jsfiddle.net/8er0e3Lh/1/

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
        <img src="http://via.placeholder.com/350x15">
    </div>
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
        <img src="http://via.placeholder.com/350x15">
    </div>
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
        <img src="http://via.placeholder.com/350x15">
    </div>
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
        <img src="http://via.placeholder.com/350x15">
    </div>
  </div>
</div>

课程顺序应该是从较低的屏幕到较大的屏幕。

希望这会对你有所帮助。

试图了解如何使用Bootstrap行/列？

4 个答案: