容器引导中的全宽答案

【问题标题】：full width in container bootstrap容器引导中的全宽
【发布时间】：2017-12-09 15:31:24
【问题描述】：

我的引导程序有点问题，我测试了很多解决问题的可能性，但我没有找到好的..

我有一个页脚。页脚位于container 中，用于与引导网格对齐。我想把宽度接触块放在右边的100%。目前它被挡在容器上。

块完全对齐，我就是这个问题

目前：

最终结果：

（完整查看我的代码）

@charset 'UTF-8';

@import url('https://fonts.googleapis.com/css?family=Lato:300,400,900|Merriweather:400,400i,700i');

.accompagnement {
    height: 550px;
    background: #fafafa;
}

.accompagnement__titre {
    font-family: Merriweather, serif;
    font-size: 30px;
    font-weight: 400;
    line-height: 240px;
    position: relative;
    color: #aba08c;
}

.accompagnement__titre:after {
    position: absolute;
    right: 40%;
    bottom: 70px;
    width: 200px;
    height: 1px;
    content: ' ';
    background: #aba08c;
}

.accompagnement__informations {
    background: white;
    background-clip: content-box;
}

.accompagnement__image {
    width: 100%;
    height: 210px;
    background: url('../assets/img/spot-of-light-1145368.jpg') no-repeat center center;
}

.accompagnement__texte {
    line-height: 26px;
    padding: 30px 30px;
}

.accompagnement__texte > h2 {
    font-size: 24px;
    color: #8b3d61;
}

.accompagnement__texte > p {
    font-weight: 300;
}

.valign {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.set-relative {
    position: relative;
}

.svg-button {
    /**
    Gestion du :Hover des SVG
   */
}

.svg-button-gauche,
.svg-button-droite {
    position: absolute;
    top: 50%;
    width: 46px;
    height: 46px;
    fill: #5e5f78;
}

.svg-button-gauche {
    left: -60px;
}

.svg-button-droite {
    right: -60px;
}

.svg-button-fleche {
    fill: none;
    stroke: #ccc;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2px;
}

.svg-button-contour {
    fill: #ccc;
}

.svg-button-gauche:hover .svg-button-fleche,
.svg-button-droite:hover .svg-button-fleche {
    stroke: red;
}

.svg-button-gauche:hover .svg-button-contour,
.svg-button-droite:hover .svg-button-contour {
    fill: red;
}

footer {
    position: relative;
    background: #e5e3e8;
}

footer ul {
    margin: 50px 0 140px 0;
    color: #5e5f78;
}

footer ul li {
    font-weight: 300;
    line-height: 25px;
}

footer ul li:first-child {
    font-family: Merriweather, serif;
    font-weight: 400;
    line-height: 30px;
}

footer ul li a {
    text-decoration: none;
    color: inherit;
}

footer ul li a:hover {
    color: inherit;
}

.footer {
    font-size: 13px;
    font-weight: 300;
    padding: 30px 0;
    color: #5e5f78;
    border-top: 1px solid #fff;
}

.footer__copyright {
    padding-left: 0;
}

.footer__appolo {
    padding-right: 0;
    text-align: right;
}

.footer__appolo > a {
    display: inline-block;
    text-decoration: none;
    color: #5e5f78;
}

.footer__appolo > a:first-child:after {
    margin: 0 15px;
    content: '•';
}

.contacts {
    position: absolute;
    top: -20px;
    right: 0;
    height: 409px;
    background: #fff;
    background-clip: content-box;
}

.contacts > h2 {
    font-family: Merriweather, serif;
    font-size: 30px;
    line-height: 30px;
    position: relative;
    margin-bottom: 55px;
    color: #aba08c;
}

.contacts > h2:after {
    position: absolute;
    bottom: -30px;
    left: 0;
    width: 300px;
    height: 1px;
    content: ' ';
    background: #aba08c;
}

.contacts__tel {
    font-weight: 300;
    line-height: 30px;
    margin: 0 0 50px 0;
}

.contacts__permanence,
.contacts__disponibilite,
.contacts__lieu {
    font-family: Merriweather, serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 30px;
    margin: 0;
}

.contacts__adresse {
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
    margin: 0;
    color: #5e5f78;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<section class="container-fluid accompagnement">
    <div class="container">
        <div class="row">
            <div class="container">
                <div class="row set-relative">
                    <div class="col-lg-4 accompagnement__informations">
                        <div class="accompagnement__image"></div>
                        <div class="accompagnement__texte">
                            <h2>Title</h2>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid blanditiis dignissimos fuga nobis, nulla, pariatur, quia quisquam reiciendis repellendus tempore vero voluptas voluptate voluptatibus. Alias ducimus impedit nostrum reprehenderit ut!</p>
                        </div>
                    </div>
                    <div class="col-lg-4 accompagnement__informations">
                        <div class="accompagnement__image"></div>
                        <div class="accompagnement__texte">
                            <h2>Title</h2>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda consectetur doloribus ducimus eveniet molestiae? Amet delectus, distinctio harum incidunt, laborum libero minima minus molestias quam repudiandae suscipit ut veniam voluptatum.</p>
                        </div>
                    </div>
                    <div class="col-lg-4 accompagnement__informations">
                        <div class="accompagnement__image"></div>
                        <div class="accompagnement__texte">
                            <h2>Title</h2>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores cumque eligendi expedita id itaque minus modi neque nostrum odio omnis provident quam quas quasi quisquam ratione repellendus, sapiente similique voluptas.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<footer>
    <div class="container">
        <div class="row">
            <div class="col-lg-8">
                <div class="row">
                    <div class="col-lg-3">
                        <ul class="list-unstyled">
                            <li>Menu</li>
                            <li><a href="#">SubMenu</a></li>
                            <li><a href="#">SubMenu</a></li>
                            <li><a href="#">SubMenu</a></li>
                        </ul>
                    </div>
                    <div class="col-lg-3">
                        <ul class="list-unstyled">
                            <li>Menu</li>
                            <li><a href="#">Submenu</a></li>
                            <li><a href="#">Submenu</a></li>
                            <li><a href="#">Submenu</a></li>
                        </ul>
                    </div>
                    <div class="col-lg-3">
                        <ul class="list-unstyled">
                            <li>Menu</li>
                            <li><a href="#">Submenu</a></li>
                            <li><a href="#">Submenu</a></li>
                        </ul>
                    </div>
                    <div class="col-lg-3">
                        <ul class="list-unstyled">
                            <li>Menu</li>
                            <li><a href="#">Submenu</a></li>
                            <li><a href="#">Submenu</a></li>
                        </ul>
                    </div>
                </div>
                <div class="row footer">
                    <p class="col-lg-6 footer__copyright">© 2017 Company</p>
                    <div class="col-lg-6 footer__appolo">
                        <a href="#">Plan</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="row">
                    <div class="col-lg-12 contacts">
                        <h2>Contacts</h2>
                        <p class="contacts__permanence">Blablabla</p>
                        <p class="contacts__disponibilite">Blablabla</p>
                        <p class="contacts__tel">Blablabla</p>
                        <p class="contacts__lieu">Blablabla</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</footer>
</body>

谢谢

【问题讨论】：

标签： html css twitter-bootstrap width containers

【解决方案1】：

如果您的块位于 .container 内，则不能将其展开到容器外，除非您将其设为 position:absolute 或类似的东西。您也可以将页脚中的.container 更改为.container-fluid，然后在其中创建2 个块用于放置。

.container 以设备为中心 > "xs"。

【讨论】：

如果我更改为container-fluid，我的网格与其他网站组件不对齐。我输入了absolute，但我无法扩展我的 div。
Ce que tu peux faire c'est créer un
en position:relative; qui occupe toute la largeur et ensuite à l'intérieur tu positionnes le menu dans un .container comme tu avais fait ( ce sera centré), et le bloc "contacts" tu le positionnes en absolute。 Comme son parent est en position relative, le bloc contact sera positionnable par rapport à son parent directement, et non par rapport au body。
Je vaistenter ça, je reviens par ici si jamais je n'y 到达 toujours pas。谢谢