2

是否可以使用引导程序构建边框布局，使左右边框的标签居中，将底部保持在页面底部并用中心剩余的所有空间填充内容？

新手引导，但即使在谷歌的帮助下，我还是想出了这个：

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

结果不是很有说服力——我做错了什么？

4

1 回答 1

1

看看这对你有用。

<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>

我用这个例子来组装。

像这样更好吗？

于 2015-07-19T22:21:48.223 回答