Bootstrap 3列问题答案

【问题标题】：Bootstrap 3 column issueBootstrap 3列问题
【发布时间】：2017-01-27 12:18:22
【问题描述】：

我正在与bootstrap 3 合作，对它很陌生，但这似乎是从 2 开始的一个相当简单的过渡。

这里是带有代码的 jsfiddle：http://jsfiddle.net/AHvLW/

下面是当它们都在 col-md-4 中时它如何呈现的图像：

虽然我不明白，它在 jsFiddle 中运行良好，但在我的索引文件中却不行。有没有人遇到过类似的问题，可能知道怎么回事？

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

由于列的高度并不完全相同，您需要为大视口添加一个 clearfix <div>，就像新行应该开始一样，即在您的第 3 列和第 4 列之间：

<div class="row">
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">...</div>
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">...</div>
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">...</div>

    <!-- Add the extra clearfix for only the required viewport -->
    <div class="clearfix visible-md visible-lg"></div>

    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">...</div>
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">...</div>
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">...</div>
</div>

Demo fiddle

【讨论】：

轰隆隆。你就是那个男人！我听说过很多有关 clearfix 的信息，但还没有真正阅读过它。我相信我现在应该。非常感谢！

【解决方案2】：

你可以用这个 css 轻松解决它：

.col-md-4:nth-child(3n+1){
    clear: left;
}

找到这个解决方案here

【讨论】：

这是最好的解决方案，尤其是在动态填充页面时。
我不明白为什么没有自动执行此操作的引导类。当您考虑膨胀引导程序确实有的量时。该类可以应用于具有特定类的行，例如：.row-uniform .col-md-4:nth-child(3n+1) { cle ... 例如。

【解决方案3】：

不是您问题的答案，但您应该能够优化您的代码，因为不需要使用所有尺寸类。

<div class="row">
    <div class="col-md-4 col-xs-6">...</div>
    <div class="col-md-4 col-xs-6">...</div>
    <div class="col-md-4 col-xs-6">...</div>

    <!-- Add the extra clearfix for only the required viewport -->
    <div class="clearfix visible-md visible-lg"></div>

    <div class="col-md-4 col-xs-6">...</div>
    <div class="col-md-4 col-xs-6">...</div>
    <div class="col-md-4 col-xs-6">...</div>
</div>

【讨论】：

这对于列来说是正确的，但不幸的是响应式实用程序类 visible-X 并未优化为以相同的方式工作，对于 clearfix 您确实需要添加中号和大号
你是对的（更新），已经有一些讨论了。感谢您指出这一点。

【解决方案4】：

请检查您的 div 标签是否正确关闭，以及您使用的类是否在您的代码中正确引用。

【讨论】：

【解决方案5】：

如果您正在寻找一种解决方案，您不介意所有三列的高度相同，并且由于根据不同的屏幕尺寸调用不同的列号而无法使用包装器，您可以应用类似于以下的规则我的解决方案将 id 应用于列的主包装，然后将列大小设置为具有最小高度。

main#shop .col-md-3 {
    min-height:600px;
}

【讨论】：

*另外，使用媒体查询。

【解决方案6】：

认为这可能对某些人有所帮助。只需将以下内容添加到您的样式表中。我提供了 CSS 或 SCSS。

css

/*================ Row Uniform ==================*/
.row-uniform {
  margin-right: -15px;
  margin-left: -15px;
}
.row-uniform:after {
  clear: both;
}
.row-uniform:before {
  display: table;
  content: '';
}
.row-uniform .col-xs-6:nth-child(2n+1) {
  clear: left;
}
.row-uniform .col-xs-4:nth-child(3n+1) {
  clear: left;
}
.row-uniform .col-xs-3:nth-child(4n+1) {
  clear: left;
}
.row-uniform .col-xs-2:nth-child(6n+1) {
  clear: left;
}
@media (min-width: 768px) and (max-width: 992px) {
  .row-uniform .col-sm-6:nth-child(2n+1) {
    clear: left;
  }
  .row-uniform .col-sm-4:nth-child(3n+1) {
    clear: left;
  }
  .row-uniform .col-sm-3:nth-child(4n+1) {
    clear: left;
  }
  .row-uniform .col-sm-2:nth-child(6n+1) {
    clear: left;
  }
}
@media (min-width: 992px) and (max-width: 1200px) {
  .row-uniform .col-md-6:nth-child(2n+1) {
    clear: left;
  }
  .row-uniform .col-md-4:nth-child(3n+1) {
    clear: left;
  }
  .row-uniform .col-md-3:nth-child(4n+1) {
    clear: left;
  }
  .row-uniform .col-md-2:nth-child(6n+1) {
    clear: left;
  }
}
@media (min-width: 1200px) {
  .row-uniform .col-lg-6:nth-child(2n+1) {
    clear: left;
  }
  .row-uniform .col-lg-4:nth-child(3n+1) {
    clear: left;
  }
  .row-uniform .col-lg-3:nth-child(4n+1) {
    clear: left;
  }
  .row-uniform .col-lg-2:nth-child(6n+1) {
    clear: left;
  }
}

scss

/*================ Row Uniform ==================*/

.row-uniform {
  margin-right: -15px;
  margin-left: -15px;
  &:after {
    clear:both;

  }
  &:before {
    display: table;
    content: '';
  }

  // 2
  .col-xs-6:nth-child(2n+1) {
    clear: left;
  }
  // 3
  .col-xs-4:nth-child(3n+1) {
    clear: left;
  }
  // 4
  .col-xs-3:nth-child(4n+1) {
    clear: left;
  }
  // 6
  .col-xs-2:nth-child(6n+1) {
    clear: left;
  }
  // sm
  @media (min-width:768px) and (max-width:992px) {
    // 2
    .col-sm-6:nth-child(2n+1) {
      clear: left;
    }
    // 3
    .col-sm-4:nth-child(3n+1) {
      clear: left;
    }
    // 4
    .col-sm-3:nth-child(4n+1) {
      clear: left;
    }
    // 6
    .col-sm-2:nth-child(6n+1) {
      clear: left;
    }
  }
  // md
  @media (min-width:992px) and (max-width:1200px) {
    // 2
    .col-md-6:nth-child(2n+1) {
      clear: left;
    }
    // 3
    .col-md-4:nth-child(3n+1) {
      clear: left;
    }
    // 4
    .col-md-3:nth-child(4n+1) {
      clear: left;
    }
    // 6
    .col-md-2:nth-child(6n+1) {
      clear: left;
    }
  }
  // lg
  @media (min-width:1200px) {
    // 2
    .col-lg-6:nth-child(2n+1) {
      clear: left;
    }
    // 3
    .col-lg-4:nth-child(3n+1) {
      clear: left;
    }
    // 4
    .col-lg-3:nth-child(4n+1) {
      clear: left;
    }
    // 6
    .col-lg-2:nth-child(6n+1) {
      clear: left;
    }
  }
}

然后你只需为你的行赋予新的行统一类。

<div class="row-uniform">
  <div class="col-sm-6 col-md-4 col-lg-3">
  </div>
  <div class="col-sm-6 col-md-4 col-lg-3">
  </div>
  <div class="col-sm-6 col-md-4 col-lg-3">
  </div>
  <div class="col-sm-6 col-md-4 col-lg-3">
  </div>
  <div class="col-sm-6 col-md-4 col-lg-3">
  </div>
  <div class="col-sm-6 col-md-4 col-lg-3">
  </div>
  <div class="col-sm-6 col-md-4 col-lg-3">
  </div>
</div>

【讨论】：