gpt4 book ai didi

css - 如何使用 Bootstrap 为不同的屏幕尺寸设置列类

转载 作者:行者123 更新时间:2023-12-02 17:24:58 28 4
gpt4 key购买 nike

除了小屏幕,我希望文本和数字并排显示,但它没有发生。

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

最佳答案

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

<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

关于css - 如何使用 Bootstrap 为不同的屏幕尺寸设置列类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39326917/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com