Bootstrap 5 col-sm-6和col md-4不起作用
Bootstrap是一个流行的前端开发框架，用于快速构建响应式网页和Web应用程序。它提供了一套CSS和JavaScript组件，可以轻松地创建各种布局和交互效果。
在Bootstrap中，col-sm-6和col-md-4是用于定义网格系统中列的类名。这些类名用于指定在不同屏幕尺寸下列所占的宽度比例。
- col-sm-6：在小屏幕设备上，列将占据父容器的一半宽度。
- col-md-4：在中等屏幕设备上，列将占据父容器的四分之一宽度。
如果在使用Bootstrap时col-sm-6和col-md-4不起作用，可能有以下几个原因：
- 未正确引入Bootstrap库：确保在HTML文件中正确引入了Bootstrap的CSS和JavaScript文件。可以通过在<head>标签中添加以下代码来引入Bootstrap库：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>- 未正确使用列的父容器：在使用col-sm-6和col-md-4之前，确保它们包含在正确的父容器中。通常，列应该包含在一个行（row）中，行又应该包含在一个容器（container）中。例如：
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4">
<!-- 列的内容 -->
</div>
</div>
</div>- 自定义CSS样式的冲突：如果在自定义CSS样式中对列的宽度进行了修改，可能会导致col-sm-6和col-md-4不起作用。在这种情况下，可以通过使用!important关键字来覆盖自定义样式，或者检查自定义样式是否与Bootstrap的样式冲突。
总结起来，要确保正确引入Bootstrap库，正确使用列的父容器，并避免与自定义样式的冲突，以使col-sm-6和col-md-4生效。
腾讯云并没有直接与Bootstrap相关的产品或服务，因此无法提供相关的产品介绍链接地址。
相关·内容
在小屏幕和中型屏幕中，col sm-6和col sm-4在bootstrap-5中不工作，但在大屏幕上工作正常。我的要求是在小屏幕，我必须显示2个图像和中等屏幕，我必须显示3个图像。在大屏幕上可以显示4个图像，但在小屏幕和中屏幕上显示不正常。我对引导程序是个新手。请帮助解决此问题。 作为参考，请查看附件中的图片 ? 。 ? ? -12 col-sm-6 col-md-4 col-lg-
浏览 217提问于2021-04-07得票数 0
我是bootstrap的新手。-6 col-md-4 col-lg-2 col-xl-2"></article>
<h5>Grote b
浏览 0提问于2017-05-07得票数 0
1回答
我一直在尝试找出一种方法来显示每一行中的三个项目，并使用react js和bootstrap将它们均匀地分开。 我今天已经尝试了几个小时了，但我发现如何在页面上整合网格布局时遇到了麻烦。recipe.title} style={{width:"200px", height:"200px"}}/> <h5>{`By: ${ recipe.pub
浏览 21提问于2019-01-08得票数 0
回答已采纳
我有3列使用引导程序 <div class="col-md-3">1</div> <divclass="col-md-4">3</div>它们看起来像中等大小的：
我想让它们出
浏览 3提问于2017-05-15得票数 1
回答已采纳
例如，我希望每行有两张卡片： <div class="card"> <h5 class="card-title">Card title</h5> Card text
<&#
浏览 1提问于2019-08-09得票数 2
回答已采纳
我正在尝试让bootstrap在桌面上每行5列，在表上3列，在移动设备上2列？这是我目前的代码，没有任何运气： <div class="row row-cols-5"> R1 R2
浏览 21提问于2021-01-15得票数 0
回答已采纳
@media (min-width:768px) { min-width: 50%;}
<div class="row"><d
浏览 3提问于2018-07-03得票数 0
回答已采纳
我想用php和bootstrap创建一个动态网格。例如 案例1 =>如果我总共有6条记录，则行1包含col md-4网格，行2包含col md-4网格。案例2 =>如果我总共有5条记录，则行1包含col md-4网格，行2包含col md-6网格Case 3 =>如果我总共有4条记录，则行1包含col md-4网格，行2包含col md-12网格
浏览 19提问于2019-01-24得票数 0
/SM尺寸，这是有问题的，因为我将有交错的显示器和空间。="col-lg col-md-4 col-sm-6">2</div> <div class="col-lg col-md-4 col-s
浏览 16提问于2021-11-05得票数 1
2回答
我想为我的3种类型的屏幕放置我的引导div： <div class="col-lg-8">A</div> <div class="col-lg-4">B</div><div class="col-lg-8">C</div> <div class="col-lg-4">D</div
浏览 2提问于2016-06-27得票数 0
回答已采纳
<div class="row articles"> <article> </article> <p></p></div>
<div class="
浏览 16提问于2020-03-26得票数 0
回答已采纳
1回答
我使用了col-12和col-lg-6，但是当我需要修改它的时候，col 12和col-md-6的组合不起作用。
<!/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPv
浏览 0提问于2017-11-02得票数 0
3回答
我必须创建一个5列网格在引导4，以显示100多张图片。下面的代码只有当我有5项时才能工作。我该怎么做呢？ <div class="col"> </div> 4
</div>
浏览 0提问于2019-10-22得票数 1
回答已采纳
1回答
| A B C D |-------------------------
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="styleshe
浏览 3提问于2017-05-15得票数 1
回答已采纳
3回答
带图像的引导网格溢出
、、、、
gal-container"> <div class="row"> <div class="col-sm-3 nopadding"><img sr
浏览 2提问于2018-01-17得票数 1
回答已采纳
我有产品清单： <div class="col-md-4">Item1</div> <div class="col-md-4">Item3</div>
<div class="row
浏览 8提问于2016-06-09得票数 7
回答已采纳
2回答
我是新手在bootstrap上尝试提高我的技能，我已经做了5个盒子，正如你所看到的(两个在左边和3个右边)，我的问题是为什么'5‘盒子看起来不同，而不是相应地与2号和4号不在同一行它看起来有边距-左边</div> <div class=&qu
浏览 10提问于2019-03-07得票数 0
我试着用bootstrap制作多个盒子，如下所示
所有的图像都是相同的高度，但宽度不同，所以我尝试使用网格系统，但它不起作用。“不起作用”是什么意思？如果我把image1 -md-4放在image2上，然后把col md-2放在后面的txt上，把col md-3放在txt上，所有网格系统的宽度和高度都会自动调整，所以所有图像的高度都是不同的。
浏览 1提问于2016-04-14得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
