宽度缩小时，其中一个元素增加高度时，Bootstrap网格无法正确显示

编程问答 2022-08-14

问题描述

这是我的div的定义方式：

<div class="col-xs-4 col-md-2">
    <input type="checkBox" id="collectionFilter_Agriculture" name="collectionFilter" class="collectionFilter vis-hidden" value="0" data-count="0" data-ng-true-value="0" data-ng-click="filterByCollection('0')">
    <label for="collectionFilter_Agriculture" class="collectionFilterLabel noselect" data-ng-class="{disabled: collectionFilter.length > 0 &amp;&amp; collectionArray.indexOf('0') === -1}">Agriculture</label>
</div>

这是它们的正常外观

Normal

这是缩小视口宽度时它们的外观。例如，您可以看到“动物学与生物学” div，而不是移至下一行，而是占据了整行。

Messed up

解决方法

我假设您使用的是Boostrap 3，它使用float来布局列。您可以了解有关浮动on MDN的更多信息。

您可以覆盖Bootsrap的CSS或使用更多recent version（Bootstrap 4）

以下是使用display: inline-block可以覆盖此行为的示例：

.row {  
  font-size: 0;  /* this removes the white-space in the row */

  > [class*="col-"] {
    display: inline-block!important;
    vertical-align: top; /* you can use either top,middle or bottom */
    float: none!important; /* removing bootstrap's float */
    font-size: 1rem; /* restoring font-size */
  }
}

我建议为该行添加一个新的类名，以进行此覆盖，并且不要使用.row

,

我要使其正常工作的唯一方法是在dom的适当位置插入明文div：

if (x%6===0) h+='<div class="clearfix"></div>'
else if (x%3===0) h+='<div class="clearfix visible-xs"></div>'
gridgridhtmltwitter-bootstrap