Bootstrap .container和.container-sm的区别
Bootstrap是一个流行的前端开发框架，提供了丰富的组件和样式，可以快速构建响应式网页。
.container和.container-sm是Bootstrap中用于创建容器的两个类。它们的区别在于它们适用的屏幕尺寸范围不同。
.container类适用于所有屏幕尺寸，它会根据屏幕的宽度自动调整容器的宽度。这意味着在大屏幕上，容器的宽度会比较大，而在小屏幕上，容器的宽度会相对较小。这样可以确保内容在不同屏幕尺寸下都能够合适地显示。
.container-sm类则是针对小屏幕尺寸的容器设计的。它会在小屏幕上保持容器的宽度相对较小，以适应小屏幕设备的显示需求。在大屏幕上，.container-sm类与.container类的效果是一样的。
总结起来，.container类适用于所有屏幕尺寸，而.container-sm类则主要适用于小屏幕设备。
在腾讯云的产品中，与Bootstrap相关的产品是腾讯云Web+，它是一款支持多种编程语言的Web应用托管服务，可以帮助开发者快速部署和管理网站。您可以通过以下链接了解更多关于腾讯云Web+的信息：https://cloud.tencent.com/product/tcb
相关·内容
Bootstrap 4.4中引入的Bootstrap .container CSS类和.container-sm CSS类有什么不同？在https://getbootstrap.com/docs/4.4/layout/overview/#containers部分中包含的对照表中似乎没有区别。我也看不出Bootstrap文档中包含的Grid exam
浏览 28提问于2020-04-16得票数 0
我尝试使用一个简单的布局，一个100%宽的顶部和底部的div。content="width=device-width, initial-scale=1, shrink-to-fit=no"> </div>
<div class="container-s
浏览 3提问于2022-02-23得票数 -1
1回答
引导导航条响应性
、、
我将导航条的最小屏幕宽度更改为600 no以折叠，但问题是在768 no之后，链接停止移动/对屏幕的响应发生变化，在肚脐崩溃之前，右边的两个链接不再可见。我怎么才能解决这个问题？谢谢 <nav class = "navbar navbar-default navbar-fixed-top"> &l
浏览 4提问于2015-06-13得票数 1
回答已采纳
1回答
是否有一种很好的方法来配置引导(使用更少的)来将小设备的容器宽度设置为100% (就像xs设备一样)？我试着把它放在我的css文件中： .container { }但它不起作用(我也不喜欢)
浏览 0提问于2015-10-05得票数 1
回答已采纳
我有客户网站的.psd设计，平面设计师绘制容器宽度高达1920px，我需要一个帮助如何正确设置容器的宽度到1920px。我知道如何设置更小的.container {}
浏览 0提问于2015-11-19得票数 15
2回答
我试着用Bootstrap制作一个网页。我正在使用.container-lg，以便当最大宽度为767 max时，内容可以得到100%的宽度。但是，在宽度小于768 it的屏幕上，它不是100%的宽度吗？ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.
浏览 0提问于2021-07-31得票数 0
回答已采纳
2回答
从引导带3中删除断点
、、、
我继承了一个web应用程序，它使用Bootstrap 3作为它的框架，并通过推荐的_custom-variables.scss方法应用了一些基本的定制。正式的SASS端口是作为一个依赖项添加到app.scss文件中的，在_custom-variables.scss和_custom-mixins.scss之后使用@import "bootstrap";将其包含在文件中流体宽度应用程序将无法在小屏幕上使用(由于显示的数
浏览 1提问于2016-08-10得票数 1
如何将Bootstrap限制为div的作用域？我需要将Bootstrap样式表嵌套在ExtJS应用程序中用于特定的div，但两者都冲突了，因为它们需要自己的body、ul、li、a等。我尽量避免手动编辑bootstrap.css (或将其保持在最低限度)，以便可以轻松地进行更新。
浏览 3提问于2012-05-13得票数 44
回答已采纳
1回答
我需要超越这些标准的引导宽度，不想选择随机值。在试图生成1600 to、1800 to等值时，我注意到(min-width - max-width)差值随着宽度值的增加而增大。 .container-lg, .container-md, .container-sm, .container { }@media(min-width: 12
浏览 5提问于2022-07-05得票数 1
回答已采纳
嗯，也许这个问题的标题是没有意义的。以下是我的问题的详细内容： .navbar-expand-sm>.container-sm, .navbar-expan
浏览 2提问于2020-06-07得票数 0
许多网站设计需要一个深色的背景和一个较亮的前景页面，其中包含网站的内容。当使用Bootstrap时，似乎只需将浅色应用到.container分区并完成它似乎是合乎逻辑的。然而，Bootstrap的容器在它的边缘和其中的列之间没有提供任何填充，所以这个解决方案提供了一个明亮的背景，但列内容与边缘齐平-这不是一个很好的外观。这是一个常见的</
浏览 0提问于2014-05-23得票数 10
1回答
在引导5中，当我这样做时：<html>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.cssHGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
浏览 5提问于2022-08-19得票数 0
回答已采纳
/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar
浏览 68提问于2021-03-27得票数 0
目前，我正努力使我的全部内容具有响应性，我已经设法使用不同的@媒体分辨率来响应背景，这些决议正在取得我想要的结果，然而，我注意到我的图像在前景中并不是在缩放，我所做的一切都是将一幅图像放到自己的@媒体中, .container-lg, .container-md, .container-sm max-width: 100%;}
@media (min-width: 992px, .container
浏览 7提问于2022-01-05得票数 0
1回答
重要的是，孔旋转木马也会停止工作。我添加了所有必要的引导程序和脚本，但是当鼠标悬停在carousel上时，它仍然停止级联。 -- Bootstrap Core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap" crossorigin="anonymous"><&
浏览 21提问于2021-09-15得票数 0
回答已采纳
2回答
我尝试了几个代码来获得完全宽度的图像，但它不起作用。这是我的完整的html和css。
浏览 5提问于2022-08-08得票数 0
回答已采纳
4回答
我遵循了一些教程，但我不能得到正确的结果，因为填充不起作用。当我写填充时: 3% 15%；然后添加顶部和底部填充，但从侧面不添加。我完全按照老师说的做，但对我来说就是不起作用。你知道我的代码出了什么问题吗？也许是因为我使用的是bootstrap 4.5，而课程中使用的是4.0版本？ Montserrat', sans-serif; line-height: 1.5; background-
浏览 32提问于2020-07-27得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
