使用等宽列时，引导列显示在彼此下方

Question

使用 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.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 ）也不起作用，即使它应该起作用。

Answer 1

尝试删除本地文件的链接，然后尝试使用 CDN 链接。 除了您遇到的问题之外，CDN 通常是您的网站速度和访问您网站的任何人的浏览器缓存 memory 的最佳实践。

以下是页面<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">

使用等宽列时，引导列显示在彼此下方

问题描述

1 个解决方案

解决方案1
0 2021-12-08 07:38:35

使用等宽列时，引导列显示在彼此下方

问题描述

1 个解决方案

解决方案1 0 2021-12-08 07:38:35

解决方案1
0 2021-12-08 07:38:35