如何使用引导类连续对齐文本？答案

【问题标题】：How to align text in a row using bootstrap classes?如何使用引导类连续对齐文本？
【发布时间】：2021-06-24 03:32:43
【问题描述】：

.list-group-item{
  width: 165px;
  height: 32px;
  line-height: 1px;
  text-align: center;
margin-bottom: 1px;
margin-top: 58px;
    margin-left: 20px;
}

 <ul class="list-group" v-if="showSearchHistory">
        
            <li class="list-group-item" v-for="(item, index) in searchHistory.slice(-5).reverse().map(s => s.trim( ))"
            :key="index"
              @click="selectPreviousSearch(index)">{{ item }}</li>
          </ul>

我有两个引导类，即“list-group-item”和“list-group”。所以我对此表示怀疑。对于引导类，会自动添加一些预样式。所以在这种情况下

我想将所有文本对齐在一行中（并排），而不是一个接一个。（来自 li，我在单击按钮时收到文本，）

【问题讨论】：

显示：li 项目的内联块
如果您正在使用引导程序，请尝试在list-group 上添加“d-flex”或在list-group 上使用display: flex

标签： css vue.js bootstrap-4

【解决方案1】：

ul.list-group{
  display: table;
  width: 100%;
  text-align: center;
}

ul.list-group> li {
  display: table-cell;
}

你可以使用这个选项吗？

【讨论】：

尝试改变但仍然没有改变
我认为需要针对两个引导类，如 list-group-item 和 list-group

【解决方案2】：

将list-style: none; 添加到列表中，并将display: inline 或float: left 添加到每个列表项中

看这个例子：

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_menu

【讨论】：

使用inline-block 而不是inline。 float 是仅在段落中浮动图像的属性。它不用于造型目的。随着 HTML5 和 flexbox 以及 css-grid 的引入，它在 2012 年被误用作 hack。现在到 2021 年（9 年后），你仍然应该使用 flex。
顺便说一句。这就是 w3schools 名声不一的原因。它教授许多过时的技巧，而不是最先进的方法。
嗯，你可以使用 css flexbox 或 grid，它们是最简单的方法，也是 2021 年最常用的方法。但并非所有渲染引擎都使用 HTML5（outlook 桌面应用电子邮件渲染引擎不理解 HTML5）。因此，您可以将这些称为遗留问题，但如果不考虑响应性和最佳实践，它们将完成与旧引擎兼容的工作
所以如果目的是创建一个模板
那么你就不会使用 CSS... 也不会使用导航栏。