【问题标题】:Bootstrap columns not showing correctly in Firefox引导列在 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。并请说明想要的结果。

标签: css twitter-bootstrap firefox


【解决方案1】:

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

解决方案:

.container-fluid>.row {clear:both}

抱歉误导大家。

【讨论】:

    【解决方案2】:

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

    <div class="container-fluid">
    

    【讨论】:

    • 如上所述,我知道这一点,但这与寻找解决方案无关。它与百分比有关。
    猜你喜欢
    • 2019-08-21
    • 2021-08-09
    • 2015-04-20
    • 2014-07-25
    • 1970-01-01
    • 1970-01-01
    • 2021-03-07
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多