Question

我正在使用Bootstrap。一进入移动模式，我就会在某些div之间留下一些空白（身体的颜色）。

HTML：

<div class="container-fluid">
    <div class="col-md-12 winter" style="padding-top: 120px;">
        <h1>Hallo</h1>
        <div class="col-md-6">
            <h3>Überschrift</h3>
            <p class="justifyText">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
        </div>
        <div class="col-md-6">
            <h3>Überschrift</h3>
            <p class="justifyText">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
        </div>
    </div>
    <div class="col-md-12 winter centerText whiteText">
        <h3>Teil 2</h3>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
    </div>
</div>

CSS：

.winter {
    background-color: #c8e2d2;
    text-align: center;
    margin-bottom: 0px;
    margin-top: 0px;
    height: 100%;

}

Bootstrap没有变化。一旦我进入移动模式，两个＆＃34; col-md-12冬季＆＃34; -Divs之间就会有一个空格。有人有想法吗？所有其他类都无法生效，它们只会更改文本颜色或对齐方式。

问候

Answer 1

问题是h3标签，它有默认的上边距，请尝试低于

.winter {
    background-color: #c8e2d2;
    text-align: center;
    margin-bottom: 0px;
    margin-top: 0px;
    height: 100%;

}
.winter h3 {
    margin:0;
}

<div class="container-fluid">
    <div class="col-md-12 winter" style="padding-top: 120px;">
        <h1>Hallo</h1>
        <div class="col-md-6">
            <h3>Überschrift</h3>
            <p class="justifyText">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
        </div>
        <div class="col-md-6">
            <h3>Überschrift</h3>
            <p class="justifyText">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
        </div>
    </div>
        <div class="col-md-12 winter centerText whiteText">
            <h3>Teil 2</h3>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
        </div>
    </div>

神秘的空白使用Bootstrap

1 个答案: