Bootstrap 3中的相等列高

Question

我正在使用引导程序 3，它使用浮动来对齐内容。当第一列的高度增加时，UI 会中断。不想将固定高度添加到任何列。 例如。这里是 2 列网格。所以第 1 列和第 2 列的高度应该相同，第 3 列和第 4 列应该相同。并且所有 4 列都应该在 1 个父项内。如果第 1 列的高度增加，那么高度第二列的应该增加。我不想用 flex 来做

是否有任何 CSS 修复。不想加任何js

提前致谢

.left {
  float: left;
  width: 49%;
  border: 1px solid red;
}

.col1 {
  background: red;
}

.col2 {
  background: black
}

.col3 {
  background: blue;
}

.col4 {
  background: green;
}

<div class="left col1">
  Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum. Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae
  quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin
  ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum. Taciti primis cum varius malesuada
  lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus
  mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum.
  Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis
  ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales
  integer tempus eros egestas condimentum. Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum
  venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan
</div>
<div class="left col2">
  Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum. Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae
  quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin
  ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum. Taciti primis cum varius malesuada
  lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus
  mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum.
  Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis
  ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin ante vivamus vitae.
</div>
<div class="left col3">
  Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum. Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae
  quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin
  ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum. Taciti primis cum varius malesuada
  lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus
  mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum.
  Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis
  ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin ante vivamus vitae.
</div>
<div class="left col4">
  Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum. Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae
  quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin
  ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum. Taciti primis cum varius malesuada
  lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus
  mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum.
  Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis
  ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin ante vivamus vitae.
</div>

Answer 1

Bootstrap 有自己的网格系统。另外，您也没有使用 bootstrap 3 中定义的类。这是我在 Bootstrap 3 的帮助下创建的解决方案。确保您在 Full Page Display 上看到该解决方案。

@media screen and (max-width: 768px) {
    .col4{
        margin-top: 0px !important;
    }
}

.col1 {
  background: red;
}

.col2 {
  background: black;
  color: white;
}

.col3 {
  background: blue;
}

.col4 {
  background: green;
  margin-top: -440px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- Latest compiled and minified CSS (MUST ADD THIS CDN)  -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 col1">
                Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum. Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae
                quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin
                ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum. Taciti primis cum varius malesuada
                lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus
                mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum.
                Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis
                ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales
                integer tempus eros egestas condimentum. Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum
                venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan
                Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum. Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae
                quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin
                ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum. Taciti primis cum varius malesuada
                lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus
                mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum.
                Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis
                ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales
                integer tempus eros egestas condimentum. Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum
                venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan
            </div>
            <div class="col-md-6 col2">
                Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum. Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae
                quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin
                ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum. Taciti primis cum varius malesuada
                lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus
                mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum.
                Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis
                ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales
                integer tempus eros egestas condimentum. Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum
                venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan
            </div>
        </div>
        <div class="row">
            <div class="col-md-6 col3">
                Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum. Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae
                quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin
                ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum. Taciti primis cum varius malesuada
                lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus
                mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum.
                Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis
                ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales
                integer tempus eros egestas condimentum. Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum
                venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan
            </div>
            <div class="col-md-6 col4">
                Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum. Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae
                quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin
                ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum. Taciti primis cum varius malesuada
                lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus
                mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum.
                Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis
                ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales
                integer tempus eros egestas condimentum. Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum
                venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan
                Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum. Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae
                quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin
                ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum. Taciti primis cum varius malesuada
                lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus
                mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales integer tempus eros egestas condimentum.
                Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum venenatis orci dapibus integer, lobortis
                ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan Lorem ipsum dolor sit amet consectetur adipiscing elit tortor, malesuada luctus blandit consequat tempor per odio ultrices, commodo sodales
                integer tempus eros egestas condimentum. Taciti primis cum varius malesuada lacus mauris tellus justo felis, vitae quam lectus sed libero enim aliquam quisque, dapibus inceptos pulvinar risus leo dictum neque erat. A ac habitasse pellentesque vestibulum
                venenatis orci dapibus integer, lobortis ultrices mauris lectus phasellus mattis ornare, semper tempus etiam proin ante vivamus vitae. Egestas accumsan
            </div>
        </div>
    </div>

    
   
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

        <!-- Latest compiled and minified JavaScript (MUST ADD THIS CDN)  -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

确保在 html 文件中包含用于 css 和 js 的 Bootstrap 3 cdn。我用过在线cdn。你也可以用下载的。这是Bootstrap 3 CDN 的链接。您可以访问此链接以获取Bootstrap 3 Grid System。