如何使用引导程序为不同的屏幕尺寸设置列类
[英] how to set column classes for different screen sizes using bootstrap
本文介绍了如何使用引导程序为不同的屏幕尺寸设置列类的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
除了小屏幕，我希望文本和数字并排显示，但事实并非如此.
<div class="row"><div class="col-sm-3 col-md-3 col-lg-3"><标签>编号提交的
<div class="col-sm-9 col-md-9 col-lg-9">23876
对于 1280 X 600 - 它们并排.
对于 980 X 1280 - 它们是一个低于另一个.
对于 800 X 1280 - 它们是一个低于另一个.
对于 768 X 1024 - 它们是一个低于另一个.
对于 360 X 640- 它们是一个低于另一个.
对于 320 X 500 - 它们一个在另一个之下.
如果即使对于小屏幕(320、360)也是并排的，那会很好，但没那么重要.我只关心中大屏.
https://jsfiddle.net/as39d9gk/
解决方案
用你给定的代码可以通过这段代码实现
<div class="row"><div class="col-xs-12 col-sm-5 col-md-3 col-lg-3"><标签>编号提交的
<div class="col-xs-12 col-sm-8 col-md-9 col-lg-9">23876
根据您的要求
对于 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
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/
解决方案
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
这篇关于如何使用引导程序为不同的屏幕尺寸设置列类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
