Question

我刚刚开始编写我的第一个引导程序网站，在环顾四周之后仍然没有设法找到解决方案。这是我第一次在stackoverflow上发帖，所以希望这些问题对其他人也有意义。

我希望在使用CSS集中内容的同时使我的页脚100％宽。

<footer class="container">
    <div class="row">
        <nav class="col-sm-3">
            <p>1</p>
            <p>2</p>
            <p>3</p>
        </nav>
        <nav class="col-sm-3">
            <h3>Plan du Site </h3>
                <table style="">
                </table>
        </nav>
        <nav class="col-sm-3">
            <h4>some H4</h4>
        </nav>

        <nav class="col-sm-3">
            <h3>some h3</h3>
        </nav>
    </div>
</footer>

我到目前为止的CSS：

footer{
background-color: #3D383D;
padding: 15px 100px 15px 100px;
min-width: 100%;}

body > footer > div {
        align-content: center;
        width: 100%;
    }

Answer 1

由于类.container具有设置的宽度，除非强制执行，否则无法将其设置为视口的100％。使用课程.container-fluid

http://getbootstrap.com/css/

Answer 2

使用bootstrap类text-center将内容置于div中，并将页脚上的container类更改为container-fluid。此外，从您的css中删除这些行，因为它们不是必需的：

body > footer > div {
    align-content: center;
    width: 100%;
}

100％宽页脚，同时居中内容

2 个答案: