Question

我试图将背景分为两部分。左带有图像视差和一些文字，右带有1种颜色和一个按钮。

问题在于，如果我没有设置容器流体，左侧不会到达屏幕边缘，而是设置我的文本从屏幕的最开始处开始。

这是我当前的代码

HTML

<section class="parallax" data-overlay-color="8">
    <div class="background-image">
        <img src="img/backgrounds/bg-racks.jpg" alt="#">
    </div>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 text-left mt20">
                <h2>Get 50<span class="bold"> Free Beats</span></h2>
                <p class="lead">
                    Download <strong>50 Free Beats</strong> and start recording today!
                </p>
            </div>
            <div class="col-md-6 text-left bg-theme pt50 pb50">
                <a href="http://themeforest.net/user/vossendesign/portfolio?ref=VossenDesign" target="_blank" class="btn btn-md btn-primary btn-appear shadow-dark">
                    <span>Download Now <i class="ion-unlocked"></i></span>
                </a>
            </div>
        </div>
    </div>
</section>

CSS

.bg-theme { background-color : #4c51e0 }

Answer 1

一种解决方案是使用bootstraps偏移类。你不会得到你所拥有的确切排水沟，但它会让你脱离困境。像下面这样的东西让你关闭：

<div class="col-md-6 text-left mt20">
    <div class="col-xs-11 col-xs-offset-1">
    </div>
</div>

更新：

您还需要复制用于容器流体类的容器+覆盖css。

[data-overlay-dark] .container-fluid, [data-overlay-light] .container-fluid, [data-overlay-color] .container-fluid {
    position: relative;
    z-index: 2;
}

这是我的代码笔，它在行动中：

http://codepen.io/egerrard/pen/YGjPkR

具有设置宽度div的Bootstrap全宽容器

1 个答案: