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

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

如果你申报的col-md-6 4列，它会重新排列列，使得前两个（共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>

Order类的应该是从低到屏幕更大的屏幕。

希望这会帮助你。