试图了解如何使用 Bootstrap Row/Columns？

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

你的做法是正确的，你只是把medium column classname弄错了，应该是：col-md-6。 (Bootstrap docs)

Answer 2

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

Answer 3

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

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

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>

class的顺序应该是从小屏到大屏。

希望对您有所帮助。

试图了解如何使用 Bootstrap Row/Columns？

Trying to understand how to use Bootstrap Row/Columns?

html

css

twitter-bootstrap

row

col