Bootstrap 4居中项目只在小的视口上，但没有对齐每一个其他大小？
Bootstrap 4 是一个流行的前端框架，用于快速开发响应式网页。如果你发现 Bootstrap 4 的项目在小的视口上居中，但在其他大小的视口上没有正确对齐，可能是由于以下几个原因：
基础概念
- 响应式设计：Bootstrap 使用一系列的断点（breakpoints）来定义不同屏幕尺寸下的布局。
- 网格系统：Bootstrap 的网格系统基于 12 列布局，通过
.col-*类来定义列的宽度。
可能的原因
- 断点设置不当：可能没有正确设置断点，导致在某些视口大小下布局出现问题。
- CSS 样式冲突：可能存在自定义的 CSS 样式与 Bootstrap 的样式冲突。
- 容器和行（row）的使用不当：没有正确使用
.container或.row类来包裹内容。
解决方法
以下是一些可能的解决方案：
1. 检查断点设置
确保你使用的断点是正确的。Bootstrap 4 默认的断点如下：
xs(extra small): <576pxsm(small): ≥576pxmd(medium): ≥768pxlg(large): ≥992pxxl(extra large): ≥1200px
你可以根据需要调整这些断点。
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6">
<!-- 内容 -->
</div>
</div>
</div>2. 检查 CSS 样式冲突
确保没有自定义的 CSS 样式覆盖了 Bootstrap 的样式。你可以使用浏览器的开发者工具检查元素的样式。
3. 正确使用容器和行
确保正确使用 .container 和 .row 类来包裹内容。
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6">
<!-- 内容 -->
</div>
</div>
</div>示例代码
以下是一个完整的示例，展示了如何在 Bootstrap 4 中实现响应式居中对齐：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 4 Centered Content</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
.centered-content {
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6 centered-content">
<h1>居中对齐的内容</h1>
<p>这是一个示例文本。</p>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>参考链接
通过以上方法，你应该能够解决 Bootstrap 4 中项目在不同视口大小下对齐问题。
相关·内容
我是Bootstrap的新手，所以我不确定这是否可能，但我正在尝试让几个按钮和一个tic tac toe板在所有视口大小上都不对齐(所以就是这样)，但一旦它变小，它们就会居中。我尝试使用text-center和text-sm-center，但它做的与我想要的相反(应用于最小的视区和较大的所有内容，而我希望它应用于最小的视区，而不是其他</
浏览 37提问于2019-07-04得票数 1
回答已采纳
13回答
我正在尝试使用Bootstrap 4将我的Container放在页面的中间，到目前为止我还没有成功。任何帮助都将不胜感激。我在 Codepen.io 所以你们可以试着使用它，让我知道什么是有效的，因为我几乎没有想法了…… var currentAuthor = "";function
浏览 166提问于2017-02-15得票数 437
回答已采纳
2回答
这是我在过去的几个小时里绞尽脑汁的事情，我想要一些信息来帮助我解决这个问题。在下面的行中，我正在尝试gto，以弄清楚如何执行以下操作。在移动设备上，只需将6个社交媒体图标放在容器上的一条线上，即可覆盖整个视区的宽度。 <div class="row
浏览 0提问于2016-07-26得票数 1
回答已采纳
这个问题在这里已经有答案了 ： 如何在div块中居中(水平和垂直)文本？ (27个答案) Bootstrap 4中的垂直对齐中心 (15个答案) 3天前就关门了。我正在尝试得到3个按钮与bootstrap4的一个大的在左边，和两个小的一个在另一个在另一个在右边，并正在与btn-组这样做。有效的方法是： 1
浏览 33提问于2021-02-27得票数 -2
回答已采纳
1回答
引导中的水平中心视频
、、、、
在其他地方的研究中，无法找到一个解决方案，在引导div /头部分水平中心视频，同时保持视频垂直对齐顶部。Div / header部分的宽度为100%，在特定的视口断点处有两个固定的高度。我已经尝试过删除/重命名<header>标记，以防Bootstrap的样式干扰。尝试了<center>标记，将视频标记指定为display:inline以及许多<
浏览 2提问于2015-12-29得票数 0
回答已采纳
2回答
Div水平对齐中心与堆叠
、、、
我正在使用bootstrap3，我试图实现的目标如下：.bigdiv { width: 100% }我希望这4个div必须在.bigdiv div中居中对齐(水平)。然而，如果我调整窗口的大小，它们就会流下来，互相堆叠在一起，但仍然是排列在中间的</
浏览 1提问于2013-10-29得票数 0
回答已采纳
我有一个项目清单，我想分成两列。我希望列表项文本保持左对齐，以便您看到的星号在某种列中保持对齐。但是，我希望列表项的两列始终在视口中居中。我假设我将不得不为此编写一些js，但我想知道是否有人使用Bootstrap或CSS或两者的组合来修复。
如果我的问题有任何问题，请原谅。这是我在Stack Overflow上的第一篇文章。但是，如果您查看柱塞，
浏览 1提问于2015-11-12得票数 0
我有一个A5大小的文档文件需要打印，但是媒体需要它们在A4大小的页面上，居中，不缩放。当尝试从Office导出它时，您可以调整纸张大小，但只保留左边和顶部的页边距，并将内容按宽度展开以填充纸张(文本大小保持不变)。我曾经尝试过/ PDF，但是当它涉及到在A4大小的页面上打印时，结果会导致字体混乱、行包
浏览 4提问于2014-01-21得票数 0
回答已采纳
我几乎尝试了每一种对齐和边距的组合，但都没有成功。ListBox位于WPF页上，该页绑定到主窗口上的框架。正如您从下图中看到的，大多数情况都很好。ListBox从蓝色框的左边缘和顶部适当地偏移。内容图像和TextBlock以
浏览 0提问于2013-02-08得票数 0
回答已采纳
如果您将BS站点作为代码示例，单击“似乎”以“似乎”为中心的适当视口宽度的大或小模式演示。虽然它是，而不是。当调整浏览器的大小以使模型几乎填满视口宽度时，可以清楚地观察到该模式正倾向于浏览器的左侧，我假设是由于Bootstrap破坏了滚动条宽度的计算，或者通常是由于滚动条及其宽度的混乱。我仍然试图使用BS默认模式，并试图将其居中，在这种情况下，在所有视口大
浏览 2提问于2015-02-25得票数 0
1回答
我正在寻找创建本身的产品馈送，其中有许多图像都是在行和列对齐，到目前为止，如果我强制最大高度为小的东西，并设置object-fit: contain则它看起来还可以，但是，如果我使屏幕尺寸更小，它会搞乱，单个div再次变得不同的大小，这导致一些人比其他人更高，最终缺少行，或者至少缺少对齐行。还有一个问题是，当风景或肖像图片坐在一起时，由于当前网站的性质，风景照片的大小适合查看，但明
浏览 0提问于2015-08-13得票数 0
21回答
表中的文本对齐类
、、、
Twitter的Bootstrap框架中是否有一组对齐文本的类？
例如，我有一些表，其中包含我想要右对齐的$总数。
浏览 5提问于2012-10-11得票数 759
回答已采纳
1回答
类似Jquery的插件/定制
、、、、
我在一个项目，将有一个滑块显示一些内容，如一个旋转木马。
也就是说:一个在视口上显示的项目数量有限的旋转木马和居中的项目是用类或其他东西作为证据的。我找了好几个小时，再也找不到那个插件了。我想知道是否有人能记住它的
浏览 2提问于2013-07-09得票数 0
我正在尝试遵循一个非常基本的例子。使用时，我希望能做到以下几点：<div class="row"> <h1>Bootstrap starter template</h1></p></div>...would生成居中文本。
但是，它仍然出现在最左边。我做错了什么？
浏览 4提问于2012-02-08得票数 584
回答已采纳
3回答
页面上图像的CSS对中和旋转
、、、、
我想做的是在页面上对图像进行居中，在页面上图像要比视口大几倍。图像的中心必须与当前视点的中心完全对齐(使用动态的、不同大小的图像和视图)。然后，使用CSS动画，我必须动画图像旋转。我们还假设解决方案不能使用jQuery或Javascript，并且溢出是隐藏的。解决方案必须避免使用CSS transform()和translate()，因为它们会破坏页面上的关键帧动
浏览 2提问于2015-02-25得票数 0
我使用的是Bootstrap分页，这里所有的例子都是用它在父元素的左边对齐；而如果我想让它居中对齐，水平对齐；我已经尝试了内联样式margin: 0 auto和display: inline-block; or block以及许多其他方式，但它仍然不起作用，在Chrome Dev工具中我可以看到它有一个.pagination类，它定义了停止居中对齐的padding-left: 0;
浏览 4提问于2016-12-24得票数 0
我的CSS有问题。我在我的索引页中有一个面板窗体，我想将它垂直和水平地移动到页面的中间。但我不知道如何为此创建CSS。下面是我的示例代码： </div>
浏览 4提问于2014-11-15得票数 15
9回答
我有一个这样的Bootstrap页面： <div class="col-md-6"> </div> B</div>----------
因此，如果我在移动设备上查看，A列在</em
浏览 64提问于2014-01-08得票数 182
回答已采纳
编辑:经过大量的疑难解答和阅读其他问题，我认为这是与最初的设计师设置响应与em和px视口大小有关。这是正常的吗？我在下面添加了一个链接到屏幕截图和css文件，因为有很多不同的媒体查询会影响到这一点。编辑:它只发生在一个非常小的窗口，似乎是40.063em和~<640px范围媒体查询重叠的地方。而且，在模拟器中进行复制也很困难，因为如果我先打开一个较小的<em
浏览 1提问于2017-08-02得票数 0
我有一个带有图像和简短描述的项目列表，我希望在多个行中显示它们，在行中每项具有相同的高度，如果最后一行的项较少，则以相同的间距和对中对齐。
在小分辨率中，没有问题，因为我将只显示一行一项，但在较大的设备或桌面中，每行项目的数量将是随机的(根据视口，响应)。项之间的间距相同，但行的开始或
浏览 2提问于2019-10-14得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
腾讯会议
云直播
对象存储活动推荐
腾讯云开发者
