Bootstrap的“class=text-center”与CSS的“text-align: center”有何区别？

Question

我们可能会停止使用Bootstrap框架，因此我想知道用原生CSS替换class="text-center"是否会改变任何东西。这两种方法之间有什么行为上的区别吗？

<!--Bootstrap files already included-->
<header>
    <p class="text-center">Some text</p>
</header>

并且

<header>
    <p>Some text</p>
</header>

...

/*Separate style.css file*/
header p {
    text-align: center;
}

?

- Aposhian

---

你想让页面中的所有段落都居中吗？请阅读有关CSS选择器的更多信息。 - Carol Skelly

不，那只是一个虚拟选择器。 - Aposhian

如果使用Bootstrap类与CSS属性之间存在差异。 - Aposhian

Bootstrap使用CSS实现这个功能。这个类是一个实用类，可以让你轻松地将这种行为添加到你想要的任何元素中。因此，除了去掉类名之外，你所询问的两个选项实际上没有实际区别。你完全放弃Bootstrap了吗？如果是这样，你就必须自己编写一些CSS来完成很多事情... - random_user_name

OP的问题本质上是关于Bootstrap是否对类.text-center的元素进行了额外的处理，除了text-align:center;之外，答案是否定的。 - xji

Answer 1

看起来OP的问题在首次发布后被编辑过了。它本质上是在问：除了text-align:center外，Bootstrap是否对类名为.text-center的元素进行了其他额外操作。我也曾经有过这个疑问，答案是没有。我认为这个问题可以通过查看Bootstrap源代码来更好地回答：

.text-center {
  text-align: center !important; }

显然 Bootstrap 所做的就是将一个 CSS 规则应用于该元素：text-align: center !important; 因此它们可以被视为等效的。

- xji

---

很多评论者，甚至是被接受的答案，显然没有理解提问者的问题。该问题在最初发布时已经进行了编辑。最初的问题涉及到一个适用于所有段落而不仅仅是标题内部段落的CSS选择器。这就是为什么原始答案更相关于原始问题的原因。 - Carol Skelly

@Zim 对的。我的措辞可能有些不公正，因为我只看到了问题的编辑版本。OP使用的示例并不完全准确地反映了他想要问的问题。这并不意味着他想要询问他的示例错误传达的内容。他还通过接受我的答案表示同意。 - xji

Answer 2

当使用 p 选择器时，请记住该样式将应用于页面中的每个 <p> 标签。如果您确实希望每个 <p> 都具有此样式，则可以使用它。如果您只想让一些 <p> 具有此样式，则应使用类。顺便提一下，您可以使用以下语法仅针对具有 <p class="text-center"> 的元素进行定位，而不影响具有相同类的其他标签。

p.text-center {
    text-align:center
}

注意：为了澄清一些事情，这是基本的CSS功能，与Bootstrap完全独立。无论您是否使用它，都可以执行此操作。

- stelioslogothetis

Answer 3

正如其他答案中提到的，从代码或功能行为方面来看，并没有任何附加值，因此我不会涉及该问题的这个方面。然而，我认为这是让其他开发人员轻松理解您的代码的问题。

简单地找到一个“text-center”类可以证明正在发生的标记元素的行为，而无需深入了解CSS类，使其他开发人员更方便地修改该类的访问任务（开发人员已经在文本编辑器上打开HTML页面，而非使用devTools查找相关类和/或CSS文件导致不希望的效果，导航到该文件并应用必要的函数），我认为这可以使语义代码更好。

- Patrick Younes