bootstrap注意事项（八）一些辅助信息

不能用于导航条组件中

排列导航条中的组件时可以使用这些工具类：.navbar-left 或.navbar-right 。 参见导航条文档以获取更多信息。

3.让内容块居中

为任意元素设置 display: block 属性并通过 margin 属性让其中的内容居中。下面列出的类还可以作为 mixin 使用。

1. <div class="center-block">...</div>

1. // Class
2. .center-block {
3. display: block;
4. margin-left: auto;
5. margin-right: auto;
6. }
7.  
8. // Usage as a mixin
9. .element {
10. .center-block();
11. }

4.清除浮动

通过为父元素添加 .clearfix 类可以很容易地清除浮动（float）。这里所使用的是 Nicolas Gallagher 创造的 micro clearfix 方式。此类还可以作为 mixin 使用。

 而且这种去除浮动也比较理想，虽然overflow: hidden;也能去除但是始终会遇到一些突出被影藏的问题。

1. <!-- Usage as a class -->
2. <div class="clearfix">...</div>

1. // Mixin itself
2. .clearfix() {
3. &:before,
4. &:after {
5. content: " ";
6. display: table;
7. }
8. &:after {
9. clear: both;
10. }
11. }
12.  
13. // Usage as a mixin
14. .element {
15. .clearfix();
16. }

5.显示或隐藏内容

.show 和 .hidden 类可以强制任意元素显示或隐藏(对于屏幕阅读器也能起效)。这些类通过 !important 来避免 CSS 样式优先级问题，就像quick floats一样的做法。注意，这些类只对块级元素起作用，另外，还可以作为 mixin 使用。

.hide 类仍然可用，但是它不能对屏幕阅读器起作用，并且从 v3.0.1 版本开始就不建议使用了。请使用 .hidden 或 .sr-only 。

另外，.invisible 类可以被用来仅仅影响元素的可见性，也就是所，元素的 display 属性不被改变，并且这个元素仍然能够影响文档流的排布。

1. <div class="show">...</div>
2. <div class="hidden">...</div>

1. // Classes
2. .show {
3. display: block !important;
4. }
5. .hidden {
6. display: none !important;
7. visibility: hidden !important;
8. }
9. .invisible {
10. visibility: hidden;
11. }
12.  
13. // Usage as mixins
14. .element {
15. .show();
16. }
17. .another-element {
18. .hidden();
19. }