Bootstrap 3使用text-center类无法居中文字 版权行位于第三列下方问题

你对浮动脱离文档流的理解存在部分偏差，这是导致疑惑的核心原因：

• Bootstrap 3的col-*类默认设置了float: left，三个col-sm-4刚好占满12栅格的总宽度，会横向排成一行，且第三列（评价列）的内容最多，高度最高。
• 未设置clear属性的普通块级元素，盒子本身会从父容器的左上角开始渲染，宽度确实为100%，但它的文本内容会自动避让浮动元素，不会覆盖在浮动盒子上方。因为三个浮动元素刚好占满了第一行的全部水平+垂直空间，所以版权文本只能被挤到所有浮动元素的底部开始展示，视觉上就会出现在高度最高的第三列下方，不会居中。

有两种常用的修复方式：

方案1：调整DOM结构（推荐） #

将版权信息的div移到class="row"的div外部，Bootstrap的row默认自带clearfix清除浮动规则，移出后版权div会自动在浮动行的下方占满整行，实现居中效果：

<footer class="panel-footer">
    <div class="container">
        <div class="row">
            <section id="hours" class="col-sm-4">
                <span>Hours:</span><br>
                Sun-Thurs: 11:15am-10:00pm<br>
                Fri: 11:15am - 2:30pm<br>
                Saturday collapsed<hr class="visible-xs">
            </section>
            <section id="address" class="col-sm-4">
                <span>Address:</span><br>
                7105 Resterstown Road<br>
                Baltimore, MD 21215
                <p>* Delivery area within 3-4 miles, with minimum order of 
                    $20 plus $3 charge for all deliveries.</p>
                <hr class="visible-xs">
            </section>
            <section id="testimonials" class="col-sm-4">
                <p>"The best Chinese restaurant I've been to! And that's saying
                    a lot, since I've been to many!"</p>
                <p>"Amazing food! Great service! Couldn't ask for more! I'll be
                    back again and again!"</p>
            </section>
        </div>
        <!-- 版权信息移到row外部 -->
        <div class="text-center">&copy; Copyright David Chu's China Bistro 2016</div>
    </div>
</footer>

方案2：添加清除浮动规则 #

如果不想调整DOM结构，可以给版权div添加clear: both样式，或者直接复用Bootstrap自带的clearfix类，强制该div避开上方所有浮动元素，在新行居中展示：

<div class="text-center clearfix">&copy; Copyright David Chu's China Bistro 2016</div>

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