我的Bootstrap网格在Safari和Chrome中工作正常，但在Mozilla Firefox中却不行。
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 col-xl-8">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 col-xl-6">
1
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 col-xl-6">
2
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
3
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-12 col-lg-12 col-xl-12">
a
</div>
<div class="col-xs-12 col-sm-4 col-md-12 col-lg-12 col-xl-12">
b
</div>
<div class="single-offer col-xs-12 col-sm-4 col-md-12 col-lg-12 col-xl-12">
c
</div>
</div>
</div>
</div>
</div>
</div>字符集
你知道为什么会这样吗？
3条答案
按热度按时间jbose2ul1#
事实证明，这不是关于这一部分的。问题是，上面的一行有1px的可用空间，所以Firefox试图把这一部分塞到那一行，这把一切都搞砸了。
解决方法：
字符集
对不起大家的误导。
qlckcl4x2#
TL;DR：
也有同样的问题。在我的例子中，它是一个流浪的
<br>元素，在同一个容器中，作为我的行，原来是罪魁祸首。然而，在我发现之前，我设法快速修复它在一个黑客的方式通过CSS。原文：
在我的代码中也有同样的问题。它在其他地方看起来都很好，但在Firefox中有一个元素被推到了下一行。
作者提供的解决方案对我不起作用，所以我用了一种黑客的方式。我给其中一列设置了一个max-width属性。
我有一排
.col-md-3。通过CSS，我为其中一个设置了一个自定义的max-width属性，这个属性足够小，问题就消失了--对我来说，
字符集
然而，就在那之后，我发现问题出在
<br>元素上，它不知何故在我的行所在的容器中丢失了。Firefox将其呈现为0.19px的宽度，而其他浏览器则忽略了它。删除它后，问题就消失了。yduiuuwa3#
您的标记不正确。您的开头应该是：
字符集