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>

除了你做好人之外，祝你的网站好运。

Answer 2

正如已经指出的那样，由于文本的图像大小和/或行长度，问题与内容框的可变高度有关。

诀窍是让所有盒子都与最高内容盒的高度相匹配，为此我使用了一小段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>

使用.jsEqualHeight类

if (jQuery) {
    (function ($) {
        "use strict";
        $(document).ready(function () {

            $(window).on('resize', function () {
                equalHeights();
            });

            equalHeights();

            function equalHeights() {
                if (window.matchMedia("(min-width: 768px)").matches) {

                    var elementHeights = $('.jsEqualHeight').map(function () {
                        return $(this).height();
                    }).get();

                    // Math.max takes a variable number of arguments
                    // 'apply' is equivalent to passing each height as an argument
                    var maxHeight = Math.max.apply(null, elementHeights);

                    // Set each height to the max height
                    $('.jsEqualHeight').height(maxHeight);
                } else {
                    $('.jsEqualHeight').css({ "height": "auto" });
                }
            }
        });
    }(jQuery));
}

您可能需要在matchMedia函数中使用媒体查询的值来满足您的解决方案，并根据您支持的浏览器矩阵，为不支持matchMedia的旧浏览器提供polyfill JS

Answer 3

您只需要清除768px以上每个第2列的浮点数，因为您使用的是col-sm-6而没有其他网格断点。这样可以解决列的高度差异，而无需在每12列使用的位置添加行。

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

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

请参阅FullPage上的工作示例代码段并缩小视口。

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400);
 body {
  font-family: "Source Sans Pro", sans-serif;
  color: #EEEEEE;
  font-weight: 200;
  text-rendering: optimizeLegibility;
}
a,
a:active,
a:hover,
a:focus {
  text-decoration: none;
  border-bottom: 1px dashed #EEEEEE;
  color: #EEEEEE;
}
.bg-brown {
  background-color: #48240A;
}
.bg-white {
  background-color: #EEEEEE;
}
.top-section img {
  display: block;
  margin: 0 auto;
  margin-top: 80px;
}
.top-section h1 {
  text-align: center;
  color: #EEEEEE;
  margin-top: 80px;
}
.top-section p {
  text-align: center;
  margin-top: 80px;
}
.top-section button {
  font-family: "Source Sans Pro", sans-serif;
  display: block;
  background-color: #a5682a;
  color: #EEEEEE;
  font-size: 20px;
  font-weight: 200;
  text-decoration: none;
  cursor: pointer;
  padding: 9px 20px;
  margin: 80px auto 80px auto;
  border-radius: 6px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-style: none;
  border: 2px solid #a5682a;
  transition: background-color 0.2s ease;
}
.top-section button:focus {
  outline: none;
}
.content-section-1 {
  background-color: #EEEEEE;
  color: black;
  margin-top: 50px;
}
.content-section-1 img {
  margin: 0 auto;
}
.content-section-1 .thing-header {
  margin: 40px 0;
  text-align: center;
  font-weight: 200;
}
.content-section-1 .thing-description {
  text-align: center;
  margin: 0;
  padding: 0;
}
.content-section-1 .thing-link {
  display: block;
  text-align: center;
  font-weight: 400;
  margin-bottom: 40px;
}
.content-section-1 .thing-link span {
  text-decoration: none;
  border-bottom: 1px dashed black;
}
.prefooter {
  color: black;
  padding: 20px;
  margin-bottom: 20px;
  text-align: center;
}
.bg-bottom {
  background-color: #48240A;
}
.content-section-2 h1 {
  text-align: center;
  font-weight: 200;
  padding: 50px;
}
html.no-touch button:hover {
  background-color: #48240A;
  border: 2px solid #a5682a;
}
.img-row {
  margin: 0 2%;
}
@media screen and (min-width: 320px) and (max-width: 480px) {
  .lorem-image {
    width: 220px;
  }
  .thing-header,
  .thing-description,
  .thing-link {
    text-align: left !important;
  }
}
@media (min-width: 768px) {
  .item:nth-child(2n+1) {
    clear: left;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<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 item">
        <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. 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 item">
        <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 item">
        <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 item">
        <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 class="col-sm-6 item">
        <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! Imperdiet a, venenatis vitae, justo!</span>
        </p>
      </div>

      <div class="col-sm-6 item">
        <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. Nulla consequat massa quis enim. Nulla consequat massa quis enim.</p>
        <p class="thing-link"><span>Donec pede justo! Imperdiet a, venenatis vitae, justo!</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</a></h1>
    </div>
  </div>
</div>

Answer 4

这是因为你内心长文。我建议您为.thing-description

添加这些内容

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

UPDATED PEN