如何使用Twitter Bootstrap获取居中的内容？

8 浏览
0 Comments

如何使用Twitter Bootstrap获取居中的内容？

我正在尝试按照一个非常基础的示例进行操作。使用起始页和栅格系统，我原本希望以下代码能够使文本居中显示：\n

    
Bootstrap起始模板

    示例文本。

\n然而，它仍然显示在最左边。我做错了什么？

0

3 答案

0 Comments

问题的原因是大多数人在搜索的是如何居中整个div，而不仅仅是文本内容。解决方法是在HTML中使用一个固定宽度和自动边距（左右）的元素。在Bootstrap中，定义自动边距的样式是"container"类。正确的答案是在一个div中使用"class="container"来实现居中。如果要居中一个列，则使用"class="col-*offset-*"。例如，

或

。

0
0 Comments

问题的出现原因是在Bootstrap 3中，CSS类pagination-centered被移除了。在Bootstrap 2.3.0之前的版本中，可以使用这个类来实现内容居中。

解决方法是在Bootstrap 2.3.0中，可以使用类text-center来实现内容居中。然而，建议不要使用这个类，因为它非常特定于分页，并且可能与应用于分页的样式发生冲突。此外，如果Bootstrap决定这个类需要做更多事情来实现居中分页，它可能与未来的更新不兼容。

某些情况下，这个类会使所有内容居中对齐，包括子元素。如果只想让外部容器居中对齐，而内部的内容左对齐，可以使用Bootstrap 2.3.0中的CSS类text-center。

总结起来，Bootstrap 3.0.0移除了pagination-centered类。在这个版本中，使用.text-center类来实现内容居中是正确的解决方法。

0
0 Comments

问题的出现原因是希望在使用Twitter Bootstrap时实现内容的居中对齐，但是在早期版本的Bootstrap中，并没有直接提供居中对齐的类或属性。解决方法是在使用Bootstrap 2.3.0版本及以上时，可以直接给需要居中的元素添加class属性"text-center"来实现居中对齐。在早期版本的Bootstrap中，需要定义"row"或"span12"类，并添加"text-align: center"属性来实现居中对齐。但是如果想要响应式居中对齐，则需要添加padding属性，这样不够灵活。在Bootstrap 3中，使用"text-center"类只在小屏幕上生效，因为该类被定义在响应式媒体查询中。可以在Chrome Inspector中查看"text-center"类的定义，它实际上就是一个"text-align: center"属性。所以问题的解决方法就是在Bootstrap 2.3.0及以上版本中直接使用".text-center"类，而在早期版本中则需要定义"row"或"span12"类，并添加"text-align: center"属性。

0