Html 引导网格行开始列的位置过远

我制作了一个简单的登录页，这样我就可以使用响应性设计。我正在使用引导

我有一个由4项组成的网格。每个项目都有一个图像、一个标题、一个描述和一个链接。在所有设备上，网格的行应该包含两列，除了额外的小列，在这种情况下，网格应该包含一列

这一切似乎都很好，测试了所有4个引导大小。但是，当我把它插入到CODEPTEN中时，其中一个列在行的中间开始，并迫使下一列溢出到下一行。这只发生在小屏幕上（768px到991px）

我曾尝试改变某些样式，例如减小容器宽度和文本大小，但在保持设计的同时，没有任何效果

下面是正在发生的事情的图片：

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

以下是代码笔的链接：

这是我的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>

---

这是因为里面有很长的文字。我建议您在

中添加这些。物品描述

    white-space:nowrap;
    overflow:hidden;
    text-overflow:clip;

---

这是因为你里面有很长的文字。我建议您在

中添加这些。物品描述

    white-space:nowrap;
    overflow:hidden;
    text-overflow:clip;

---

问题在于上述元件的高度

正如你在图片中看到的，上面的元素推动了元素，因为它很高，所以吹了它

例如，尝试放置

边距：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>



除此之外，你做得很好，祝你的网站好运。
问题在于上述元素的高度

正如你在图片中看到的，上面的元素推动了元素，因为它很高，所以吹了它


例如，尝试放置
边距：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>



除此之外，祝你的网站好运。
正如已经指出的，这个问题与由于图像大小和/或文本行长度而导致的内容框高度变化有关

诀窍是让所有的框匹配最高的内容框的高度，为此我使用了一小块JavaScript

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

您可能需要在
matchMedia
函数中使用媒体查询的值，以适合您的解决方案，并根据您支持的浏览器矩阵，为不支持
matchMedia
的旧浏览器提供polyfill JS，该问题与内容框的可变高度有关，因为图像大小和/或文本的行长

诀窍是让所有的框匹配最高的内容框的高度，为此我使用了一小块JavaScript

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

您可能需要在
matchMedia
功能中使用媒体查询的值，以适合您的解决方案，具体取决于支持的浏览器矩阵，对于不支持
matchMedia
的旧浏览器，只需清除768px以上每第二列的浮点值，因为您使用的是col-sm-6，没有其他网格断点。这可以解决列的高度差异，而无需在每使用12列的周围添加行

注意：我在每一列中添加了一类
项
，您可以使用任何有意义的内容，因为这是通用的

@media (min-width: 768px) {
  .item:nth-child(2n+1) {
    clear: left;
  }
}

请参见FullPage上的工作示例片段并缩小视口


@导入url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200400）；
身体{
字体系列：“源Sans-Pro”，无衬线；
颜色：#EEEEEE；
字号：200；
文本呈现：优化易读性；
}
A.
a:主动，
a:悬停，
a:焦点{
文字装饰：无；
边框底部：1px虚线#EEEEEE；
颜色：#EEEEEE；
}
布朗先生{
背景色：#48240A；
}
.bg白色{
背景色：#EEEEEE；
}
.顶部部分img{
显示：块；
保证金：0自动；
边缘顶部：80px；
}
.顶部部分h1{
文本对齐：居中；
颜色：#EEEEEE；
边缘顶部：80px；
}
.顶部部分p{
文本对齐：居中；
边缘顶部：80px；
}
.顶部部分按钮{
字体系列：“源Sans-Pro”，无衬线；
显示：块；
背景色：#a5682a；
颜色：#EEEEEE；
字体大小：20px；
字号：200；
文字装饰：无；
光标：指针；
填充：9px 20px；
保证金：80px自动80px自动；
边界半径：6px；
-moz边界半径：5px；
-webkit边界半径：5px；
边框样式：无；
边框：2个实心#a5682a；
过渡：背景色0.2s；
}
.顶部部分按钮：焦点{
大纲：无；
}
.第1节内容{
背景色：#EEEEEE；
颜色：黑色；
边缘顶部：50px；
}
.内容-第1节img{
保证金：0自动；
}
.content-section-1.事物标题{
利润率：40px0；
文本对齐：居中；
字号：200；
}
.content-section-1.事物描述{
文本对齐：居中；
保证金：0；
填充：0；
}
.content-section-1.事物链接{
显示：块；
文本对齐：居中；
字体大小：400；
边缘底部：40px；
}
.content-section-1.事物链接跨度{
文字装饰：无；
边框底部：1px黑色虚线；
}
.预购{
颜色：黑色；
填充：20px；
边缘底部：20px；
文本对齐：居中；
}
.bg底部{
背景色：#48240A；
}
.内容-