html - Bootstrap 网格行开始的列太远

Question

我制作了一个简单的着陆页，以便我可以使用响应式设计。我正在使用 Bootstrap。

我有一个包含 4 个元素的网格。每个元素都有一个图像、一个标题、一个描述和一个链接。在所有设备上，网格的行应包含两列，除了特别小的列，在这种情况下它应该包含一列。

这一切似乎都工作正常，已经测试了所有 4 种 Bootstrap 尺寸。但是，当我将它插入 Codepen 时，其中一列从行的中间开始并强制下一列溢出到下一行。这只发生在小屏幕(768px 到 991px)上。

我曾尝试更改某些样式，例如减小容器宽度和文本大小，但在保持设计的同时没有产生预期的效果。

这是正在发生的事情的图片:

“Nullam”div 应位于同一行的左侧。

这是 Codepen 的链接:http://codepen.io/alanbuchanan/pen/PZXRPr

这是我的 HTML:

<div class="bg-brown">
    <div class="container">
        <div class="row top-section">
            <img class="lorem-image" src="http://i.imgur.com/7Eiswkk.png" alt="">
            <h1>Ipsum Dolor sit Amet.</h1>
            <p class="col-lg-offset-2 col-lg-8">Consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
            <div class="col-lg-12">
                <button>Donec quam felis!</button>
            </div>
        </div>
    </div>
</div>

<div class="bg-white">
    <div class="container">
        <div class="row content-section-1">

            <div class="col-sm-6 col-xs-12">
                <img class="img-responsive" src="http://lorempixel.com/400/250/cats/1" alt="">
                <h2 class="thing-header">Ultricies nec.</h2>
                <p class="thing-description">Pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
                <p class="thing-link"><span>Donec pede justo!</span></p>
            </div>

            <div class="col-sm-6 col-xs-12">
                <img class="img-responsive" src="http://lorempixel.com/400/250/cats/2" alt="">
                <h2 class="thing-header">Fringilla vel.</h2>
                <p class="thing-description">Aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut.</p>
                <p class="thing-link"><span>Imperdiet a, venenatis vitae, justo!</span></p>
            </div>

            <div class="col-sm-6 col-xs-12">
                <img class="img-responsive" src="http://lorempixel.com/400/250/cats/3" alt="">
                <h2 class="thing-header">Nullam.</h2>
                <p class="thing-description">Dictum felis eu pede mollis pretium. Integer tincidunt. </p>
                <p class="thing-link"><span>Cras dapibus!</span></p>
            </div>

            <div class="col-sm-6 col-xs-12">
                <img class="img-responsive" src="http://lorempixel.com/400/250/cats/4" alt="">
                <h2 class="thing-header">Vivamus elementum semper nisi.</h2>
                <p class="thing-description">Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu.</p>
                <p class="thing-link"><span>Consequat vitae!</span></p>
            </div>

        </div>
        <div class="row prefooter">
            <p>Eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p>
        </div>
    </div>
</div>

<div class="bg-bottom">
    <div class="container">
        <div class="row content-section-2">
            <h1><i class="fa fa-github"></i> <a href="https://github.com/alanbuchanan">alanbuchanan</h1></a>
        </div>
    </div>
</div>

这是我的 CSS:

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400);
$font-thin: 'Source Sans Pro', sans-serif;

$top-section-bg-color: #48240A;
$btn-bg-color: #a5682a;
$btn-border-width: 2px;
$main-color: #EEEEEE;
$top-section-spacing: 80px;

$content-section-1-bg-color: #EEEEEE;
$content-section-1-font-color: black;

$content-section-2-bg-color: $top-section-bg-color;

body {
    font-family: $font-thin;
    color: $main-color;
    font-weight: 200;
    text-rendering: optimizeLegibility;
    font-size: 14px;
}

a, a:active, a:hover, a:focus {
    text-decoration: none;
    border-bottom: 1px dashed $main-color;  
    color: $main-color;  
}

.bg-brown {
    background-color: $top-section-bg-color;
}

.bg-white {
    background-color: $content-section-1-bg-color;
}

.top-section {

    img {
        display: block;
        margin: 0 auto;
        margin-top: $top-section-spacing;
    }

    h1 {
        text-align: center;
        color: $main-color;
        margin-top: $top-section-spacing;
    }

    p {
        text-align: center;
        margin-top: $top-section-spacing;
    }

    button {
        font-family: $font-thin;
        display: block;

        background-color: $btn-bg-color;

        color: $main-color;    
        font-size: 20px;
        font-weight: 200;
        text-decoration: none;

        cursor: pointer;

        padding: 9px 20px;
        margin: $top-section-spacing auto $top-section-spacing auto;

        border-radius:6px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-style: none;
        border: $btn-border-width solid $btn-bg-color;

        transition: background-color 0.2s ease;

        &:focus {
            outline: none;
        }
    }
}


.content-section-1 {

    background-color: $content-section-1-bg-color;
    color: $content-section-1-font-color;
    margin-top: 100px;

    img {
        display: block;
        margin: 0 auto;
        width: 100%;
    }

    .thing-header {
        margin: 40px 0;
        text-align: center;
        font-weight: 200;
    }

    .thing-description {
        text-align: center;
        margin: 0;
        padding: 0;
        font-size: 14px;
    }

    .thing-link {
        display: block;
        text-align: center;
        font-weight: 400;
        margin-bottom: 40px;

        span {
            text-decoration: none;
            border-bottom: 1px dashed black;
        }
    }
}

.prefooter {
    color: $content-section-1-font-color;
    padding: 50px;
    text-align: center;
}

.bg-bottom {
    background-color: $content-section-2-bg-color;
}

.content-section-2 {
    h1 {
        text-align: center;
        font-weight: 200;
        padding: 50px;
    }
}

html.no-touch button:hover {
    background-color: $top-section-bg-color;
    border: $btn-border-width solid $btn-bg-color;
}

@media screen and (min-width: 320px) and (max-width: 480px) {

    .lorem-image {
        width: 220px;
    }

    .thing-header, .thing-description, .thing-link {
        text-align: left !important;
    }

}

Answer 1

问题出在上面元素的高度上!

正如你在图片中看到的那样，上面的元素插入了元素，因为它是高的!

例如尝试将 margin: 0px; 用于底部的 p 元素，图片将回到它的位置

但这不是正确的解决方案!正确的解决方案是将每 2 个元素放在一个 div 中，然后关闭它，将另外两个元素放在另一个 div 中，然后关闭等等，这样每个元素都可以放置而不会伤害下面的元素，这样你的 HTML 看起来会有点像像这样

<div class="row">
    <div class="col-sm-6 col-xs-12"></div>
    <div class="col-sm-6 col-xs-12"></div>
</div>
<div class="row">
    <div class="col-sm-6 col-xs-12"></div>
    <div class="col-sm-6 col-xs-12"></div>
</div>

除此之外，你做得很好，祝你的网站好运。