使用等宽列时，引导列显示在彼此下方
Posted
技术标签:
【中文标题】使用等宽列时，引导列显示在彼此下方【英文标题】：Bootstrap columns are displayed underneath each other when using equal-width columns 【发布时间】：2022-01-12 01:07:08 【问题描述】：使用 Bootstrap 5，等宽列显示在彼此下方。这是我的基本示例，直接取自 Bootstrap 网站：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>Bootstrap (bootstrap.min.css) 加载在头部，我可以使用所有引导类没问题，但列显示在彼此下方而不是彼此相邻。
当我在所有列上指定 col-xs-4 之类的列宽时，它可以正常工作：
<div class="container">
<div class="row">
<div class="col-xs-4">
Column
</div>
<div class="col-xs-4">
Column
</div>
<div class="col-xs-4">
Column
</div>
</div>
</div>
但是引导网站说我可以使用col 或col-(breakpoint) 来制作自动获得相同宽度的列来填充行。这对我不起作用。上面的例子是这样的：
第一个例子：
第二个例子：
注意：使用不带断点的col-(n)（例如在这种情况下为col-4）也不起作用，即使它应该起作用。
【问题讨论】：
关于您的故事的某些内容没有加起来。请参阅我为您转换的 sn-p。它工作正常。 @isherwood 我有一个引导程序的本地副本，其中包括。除了 bootstrap.min.css 之外，我是否必须包含来自 css 文件夹的更多文件？ 否，但请确保它是完整的并且是当前/正确的版本。您可以检查您的专栏和 Bootstrap 文档示例中的专栏，看看它们是否匹配。 @gowner 一般来说，使用本地文件不太好或健康。 CDN 文件对缓存内存有很大帮助，它们确实也可以加快您的网站速度。所以，只是一个测试，看看它是否能解决当前的问题，也许可以试试 CDN。您只需要 Bootstrap 本身和 CSS 的链接。使用 Bootstrap 5，我建议使用“Bundle”链接 @CuteCodeRob 用远程文件替换链接确实可以解决问题。我仍然不确定我做了什么把它搞砸了，但至少它现在正在运行。我不确定是应该删除问题还是直接离开。 【参考方案1】：尝试删除本地文件的链接，然后尝试使用 CDN 链接。除了您遇到的问题之外，CDN 通常是您的网站速度和访问您网站的任何人的浏览器缓存的最佳实践。
这里是您页面的<head> 的链接。
Bootstrap 5 捆绑包（捆绑包包括 Popper.js）
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
这里是 CSS 的链接。
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
PS：CDN 应该是您首选的原因是 - 假设有人访问您的网站，您的本地文件加载到他们的浏览器中。然后他们访问我的网站并且必须加载更多本地文件。如果我们都使用 CDN，那么它已经从您的网站或我的网站加载到他们的浏览器中，哇，一切都更快了。
【讨论】：
以上是关于使用等宽列时，引导列显示在彼此下方的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 Tkinter 在 Python 2.7 中创建等宽列