Question

我在这个网站上工作http://ba-test.nowcommu.myhostpoint.ch/antonio2/（ Bootstrap ）

正如您所看到的，内容与第一个滑块没有完全对齐。我需要的是完美对齐它（见截图）。我也为你提供了HTML代码：

HTML：

        <!-- Start 3 columns -->  
    <div class="row fluid bg" style="background-image: url('img/bg_section.png'); background-size: 100%; height: 666px;">
        <div class="col-lg-12">
            <div class="col-md-4">
                <h1 class="headline home">ARCHITEKTUR</h1>
                <h2 class="subtitle home">Lorem Ipsum. Proin gravida nibh.</h2>
                <p class="text home">Vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum. vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum. vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum.</p>
            </div>

              <div class="col-md-4">
                <h1 class="headline home">LAGE</h1>
                <h2 class="subtitle home">Lorem Ipsum. Proin gravida nibh.</h2>
                <p class="text home">Vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum. vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum. vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum.</p>
            </div>

            <div class="col-md-4">
                <h1 class="headline home">WOHNUNGEN</h1>
                <h2 class="subtitle home">Lorem Ipsum. Proin gravida nibh.</h2>
                <p class="text home">Vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum. vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum. vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum.</p>
            </div>

            <div class="col-md-8 picture">
            <img class="img-responsive" src="img/place.jpg" />
            <h2 class="text-under-picture">Lorem Ipsum. <strong>Proin</strong> gravida nibh vel<strong><br>velit</strong> auctor aliquet. Lorem <strong>Ipsum</strong></h2>    
            </div>

        </div>  
    </div>
   <!-- End 3 Columns -->

Answer 1

padding上的.bg可以达到效果：

.row.fluid.bg {
    margin-bottom: 500px;
    padding: 0 50px;   /* this is new - adjust the 50px if you want*/
}

（查看main.css第92行）

这种方法的好处是，内部列采用了新的大小。

作为一个小插件，您可以尝试添加

.navbar {
    margin-left: 64px;
    margin-right: 64px;
}

Bootstrap：对齐内容

1 个答案: