how to set column classes for different screen sizes using bootstrap

问题

Except for small screens, I would like the text and the number to be side-by-side, but it isn't happening.

<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>

For 1280 X 600 - they are side by side.
For 980 X 1280 - they are one below the other.
For 800 X 1280 - they are one below the other.
For 768 X 1024 - they are one below the other.
For 360 X 640- they are one below the other.
For 320 X 500 - they are one below the other.

If it is side-by-side even for small screens (320, 360), that would be nice, but not that important. I am only concerned about the medium and large screens.

https://jsfiddle.net/as39d9gk/

回答1:

with your given code it can be achieved by this code

<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>

as per your requirement you want

For 980 X 1280 - they are one below the other.

For 800 X 1280 - they are one below the other.

For 768 X 1024 - they are one below the other. its not a perfect code but its fits to your requirement i use col-sm-5 and col-sm-8 so when they add up its become 13 so it automatically goes to next line but it is not a good approach but can do work for you you can simply add margin-left to second div and use col-sm-4 col-sm-8 and to col-sm-8 add margin-left

回答2:

Try this

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

sm-12 means div have width 100% on small screen, md-3 have 25% width on medium screen. and lg-3 means 25% on large screen

来源：https://stackoverflow.com/questions/39326917/how-to-set-column-classes-for-different-screen-sizes-using-bootstrap

标签

css

twitter-bootstrap-3