如何实现具有 3 列和页脚的布局

Question

我正在尝试使用 bootstrap 3.3 构建此页脚。页脚如下所示：

左侧文本 - 社交图标 - 右侧文本

这是我尝试过的： http://jsfiddle.net/bsumgcpk/1/

            <div class="container black">

            <div class="col-xs-6 col-sm-4 white"><p> COPYRIGHT © 2014</p></div>
            <div class="col-xs-6 col-sm-4 white text-center"> 


                    <img src="icon-g-.png" alt="google+">
                        <img src="icon-twitter.png" alt="twitter">
                        <img src="icon-fb.png" alt="facebook">

            </div>
                        <div class="col-xs-6 col-sm-4 right"><p> right text</p></div>


        </div>

Answer 1

您忘记将列放入 row div。
Bootstrap 有 12 列网格系统，因此您的列的总和应为 12.
这就是为什么我使用 3 大小为 4 的列的原因。

工作JSFiddle。

p {
    color: white;
}
.black {
    background: #000;
}
.right {
    text-align:right;
}

<link href="http://www.kissingerassoc.com/~order-portal/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container black">
    <div class="row">
        <div class="col-xs-4 col-sm-4 white">
            <p>COPYRIGHT © BITPHONE.ES 2014</p>
        </div>
        <div class="col-xs-4 col-sm-4 white text-center">
            <img src="https://bitphone.es/wp-content/uploads/2015/07/icon-g-.png" alt="google+" />
            <img src="https://bitphone.es/wp-content/uploads/2015/07/icon-twitter.png" alt="twitter" />
            <img src="https://bitphone.es/wp-content/uploads/2015/07/icon-fb.png" alt="facebook" />
        </div>
        <div class="col-xs-4 col-sm-4 right">
            <p>right text</p>
        </div>
    </div>
</div>

如何实现具有 3 列和页脚的布局

How to achieve a layout with 3 columns and a footer

html

css

footer

twitter-bootstrap-3