引导列在 Firefox 中未正确显示

Posted 2023-03-06

【中文标题】引导列在 Firefox 中未正确显示

【英文标题】：Bootstrap columns not showing correctly in Firefox

【发布时间】：2016-02-25 10:48:53

【问题描述】：

我的 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>

您知道为什么会发生这种情况吗？

【问题讨论】：

这是class="container-fluid" 不是class="container fluid"

谢谢，这对这个问题没有影响。页面中心我还有1、2、3内容行，a、b、c放不下，掉到下一行。

与 Chrome / Safari 不同的 Firefox 上实际发生了什么，你只是说它显示不正确？

你在使用 Bootstrap4 吗？

You can't have a container inside a container。并请说明想要的结果。

【参考方案1】：

事实证明，这根本与这部分无关。问题是上面的那一行有 1px 的可用空间，所以 Firefox 试图将这部分塞进那一行，这把它搞砸了。

解决方案：

.container-fluid>.row clear:both

抱歉误导大家。

【参考方案2】：

您的标记不正确。你的开场白应该是：

<div class="container-fluid">

【讨论】：

如上所述，我知道这一点，但这与寻找解决方案无关。它与百分比有关。