如何使用bootstrap为不同的屏幕大小设置列类

Question

除了小屏幕,我希望文本和数字并排,但它不会发生.

<div class="container-fluid">
 <div class="row">
  <div class="col-sm-3 col-md-3 col-lg-3">
   <label>No. Of Submissions</label>
  </div>
  <div class="col-sm-9 col-md-9 col-lg-9">
   23876
  </div>
</div>

对于1280 X 600 - 它们是并排的.
对于980 X 1280 - 它们是一个低于另一个.
对于800 X 1280 - 它们是一个低于另一个.
对于768 X 1024 - 它们是一个低于另一个.
对于360 X 640-它们是一个低于另一个.
对于320 X 500 - 它们是一个低于另一个.

如果它是并排的小屏幕(320,360),这将是不错的,但不是那么重要.我只关心大中型屏幕.

https://jsfiddle.net/as39d9gk/

Answer 1

使用您给定的代码,可以通过此代码实现

   <div class="container-fluid">
     <div class="row">
        <div class="col-xs-12 col-sm-5 col-md-3 col-lg-3">
            <label>No. Of Submissions</label>
        </div>
        <div class="col-xs-12 col-sm-8 col-md-9 col-lg-9">
            23876
        </div>
    </div>

根据您的要求,您想要

对于980 X 1280 - 它们是一个低于另一个.

对于800 X 1280 - 它们是一个低于另一个.

对于768 X 1024 - 它们是一个低于另一个.它不是一个完美的代码,但它符合你的要求我使用col-sm-5和col-sm-8所以当他们加起来它变成13所以它自动进入下一行,但它不是一个好方法,但可以做的工作对于你,你可以简单地将margin-left添加到第二个div并使用col-sm-4 col-sm-8和col-sm-8添加margin-left