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

Answer 2

试试这个

   ID   | Player1 | Player2 | Player3
  ===================================
   101  |   Tom   |  Dick   | Harry
   102  |  Jack   | Martin  | Anna
   103  |  Harry  |  Tom    | Dick

sm-12表示div在小屏幕上宽度为100％，md-3在中等屏幕上宽度为25％。和lg-3在大屏幕上意味着25％

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

2 个答案: