Bootstrap4 list-inline类无法让列表元素横向排列的问题求助

我在做freeCodeCamp的「Quote Machine」（随机引用生成器）项目时，尝试用列表制作三个按钮项，想用Bootstrap的list-inline类让它们横向排列，但每个<li>都独占一行，完全达不到预期效果。目前未添加自定义CSS的代码如下：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>Random Quote Machine</title> 
  <link href="https://stackpath.bootstrapcdn.com/bootstra...

问题原因&解决方案 #

1. 先检查Bootstrap的引入是否完整

你提供的link标签是截断的，路径不完整会导致Bootstrap样式根本没加载，列表自然会用浏览器默认的块级显示。先把CSS链接补全，比如用Bootstrap 4的完整CDN：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

2. 正确使用Bootstrap的列表横向排列类

Bootstrap 4及以后的版本中，list-inline需要配合子元素的list-inline-item类才能生效——list-inline加在父级<ul>/<ol>上，每个<li>要加list-inline-item。正确的结构应该是这样：

<ul class="list-inline">
  <li class="list-inline-item"><button class="btn btn-primary">新引用</button></li>
  <li class="list-inline-item"><button class="btn btn-secondary">分享到推特</button></li>
  <li class="list-inline-item"><button class="btn btn-success">复制引用</button></li>
</ul>

如果是用的Bootstrap 3，只需要给<ul>加list-inline，<li>会自动横向排列，但现在大部分项目用的都是4+版本，所以一定要注意类的搭配。

3. 极端情况的兜底样式

如果上面两步都做了还是有问题，可能是其他样式冲突（虽然你说没加自定义CSS，但难保浏览器有奇怪的默认样式），可以加一点自定义CSS强制修正：

.list-inline-item {
  display: inline-block !important;
  margin-right: 0.5rem; /* 可选，给按钮加一点间距 */
}

这样调整后，三个按钮列表项应该就能正常横向排列了。

内容的提问来源于stack exchange，提问作者user9542625