容器引导程序的全宽

时间：2017-07-05 20:08:21

标签： html css twitter-bootstrap width containers

我对bootstrap有一点问题，我测试很多解决问题的可能性，但是我没有找到好的..

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

块完全对齐，我有这个问题

Curently： enter image description here

最终结果： enter image description here

（在完整视图中查看我的代码）

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

由于

1 个答案:

答案 0 :(得分：0)

如果您的区块位于.container内，则无法将其展开到容器外部，除非您将其设为position:absolute或类似的内容。 您还可以将页脚中的.container更改为.container-fluid，然后在内部创建2个块以进行放置。

.container以设备为中心＆gt; “XS”。

相关问题
最新问题