Question

我正在使用Bootstrap构建一个网站。我使用过Grid。网格均匀排列在 Google Chrome 中，但在 Mozilla Firefox 和 Microsoft Edge 中查看时排列不均匀。基本结构如下：

<row>
    <div class="col-md-3 col-sm-6 col-xs-12 nopadding"><div>
    <div class="col-md-3 col-sm-6 col-xs-12 nopadding"><div>
    <div class="col-md-3 col-sm-6 col-xs-12 nopadding"><div>
    <div class="col-md-3 col-sm-6 col-xs-12 nopadding"><div>
</row>
<row>
    <div class="col-md-3 col-sm-6 col-xs-12 nopadding"><div>
    <div class="col-md-3 col-sm-6 col-xs-12 nopadding"><div>
    <div class="col-md-3 col-sm-6 col-xs-12 nopadding"><div>
    <div class="col-md-3 col-sm-6 col-xs-12 nopadding"><div>
</row>
.
.
</row> //n-th row

您可以查看网站的输出： Link to Website

Answer 1

添加<div class="clearfix"></div>

在每个<row>代码关闭之前

...如下所示

    <row>
        <div class="col-md-3 col-sm-6 col-xs-12 nopadding"><div>
        <div class="col-md-3 col-sm-6 col-xs-12 nopadding"><div>
        <div class="col-md-3 col-sm-6 col-xs-12 nopadding"><div>
        <div class="col-md-3 col-sm-6 col-xs-12 nopadding"><div>
    <div class="clearfix"></div>
    </row>
    <row>
        <div class="col-md-3 col-sm-6 col-xs-12 nopadding"><div>
        <div class="col-md-3 col-sm-6 col-xs-12 nopadding"><div>
        <div class="col-md-3 col-sm-6 col-xs-12 nopadding"><div>
        <div class="col-md-3 col-sm-6 col-xs-12 nopadding"><div>
    <div class="clearfix"></div>
    </row>
    .
    .
    <div class="clearfix"></div>
    </row> //n-th row

Mozilla Firefox

1 个答案: