col-lg-2 col-md-4 col-6在引导程序4上不起作用。在移动视图中，它们与col-md-4一起显示，而不是col-6
col-lg-2 col-md-4 col-6在引导程序4上不起作用。在移动视图中，它们与col-md-4一起显示，而不是col-6
提问于 2020-05-29 17:31:45
<div class="container">
<div class="row space">
<div class="col-sm-12 col-md-4 col-lg-2">
<a href="#"><img src="background.jpeg" class="img-thumbnail"></a>
<p class="text-center">
<label>Description</label>
</p>
</div>
<div class="col-sm-12 col-md-4 col-lg-2">
<a href="#"><img src="background.jpeg" class="img-thumbnail"></a>
<p class="text-center">
<label>Description</label>
</p>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<a href="#"><img src="" class="img-thumbnail"></a>
<p class="text-center">
<label>Description</label>
</p>
</div>
</div>
</div>这是代码，在大屏幕上，它们显示为col2，但在中型和小型屏幕上，它们显示为col4。
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-05-29 18:02:36
您可能正在不同大小的设备上检查它。如果您需要在超小型设备上应用css，请使用col-6(在上面的代码中没有)，而不是col-sm-6。或者根据您的要求，两者都可以。请找到使用bootstrap的网格布局的指南。
Bootstrap 4网格系统有五个类：
.col- (extra small devices - screen width less than 576px)
.col-sm- (small devices - screen width equal to or greater than 576px)
.col-md- (medium devices - screen width equal to or greater than 768px)
.col-lg- (large devices - screen width equal to or greater than 992px)
.col-xl- (xlarge devices - screen width equal to or greater than 1200px)在您的代码中，您可以做到这一点。
<div class="container">
<div class="row space">
<div class="col-lg-2 col-md-4 col-sm-6 col-6">
<a href="#"><img src="background.jpeg" class="img-thumbnail"></a>
<p class="text-center">
<label>Description</label>
</p>
</div>
<div class="col-lg-2 col-md-4 col-sm-6 col-6">
<a href="#"><img src="background.jpeg" class="img-thumbnail"></a>
<p class="text-center">
<label>Description</label>
</p>
</div>
<div class="col-lg-2 col-md-4 col-sm-6 col-6">
<a href="#"><img src="" class="img-thumbnail"></a>
<p class="text-center">
<label>Description</label>
</p>
</div>
</div>
</div>Stack Overflow用户
发布于 2020-07-24 02:24:49
对于那些可能没有阅读所选答案的评论的人：
添加所需的Bootstrap元标记，就像@Orest提到的那样，为我解决了这个问题。
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
...
</head>
...
</html>参考：https://getbootstrap.com/docs/4.1/getting-started/introduction/#starter-template
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62082821
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号