css - 如何使用 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>
</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