bootstrap 的边框布局

Question

是否可以使用 bootstrap 构建边框布局，将左右边框的标签居中，将底部保持在页面底部，并用所有内容填充内容 space 留在中间？

bootstrap 的新手，但即使在 google 的帮助下，我也只是想到了这个：

div class="container">
<div class="row">
    <div class="col-xs-1">
        <div class="left-box">
            <div class="turn-left">left</div>
        </div>
    </div>
    <div class="col-xs-10">
        <div class="row">
            <div class="col-xs-12">
                <div class="top-box">top</div>
            </div>
            <div class="col-xs-12">
                <div class="content-box">content</div>
            </div>
            <div class="col-xs-12">
                <div class="bottom-box">bottom</div>
            </div>
        </div>
    </div>
    <div class="col-xs-1">
        <div class="right-box">
            <div class="turn-right">right</div>
        </div>
    </div>
</div>

https://jsfiddle.net/fbtw6/352

结果不太令人信服——我做错了什么？

Answer 1

看到它 this 适合你。

<div class="container">
    <div class="page-header">
        <div class="row">
            <div class="col-xs-1">
                <div class="left-box">
                    <div class="turn-left">left</div>
                </div>
            </div>
            <div class="col-xs-10">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="top-box">top</div>
                    </div>
                    <div class="col-xs-12">
                        <div class="content-box">content</div>
                    </div>
                </div>
            </div>
            <div class="col-xs-1">
                <div class="right-box">
                    <div class="turn-right">right</div>
                </div>
            </div>
        </div>
    </div>
</div>
<footer class="footer">
    <div class="container">
        <p>sticky footer</p>
    </div>
</footer>

我用这个 example 到 assemble。

喜欢this更好吗？