Bootstrap列無響應/流暢

Question

我第一次使用Bootstrap CSS網格系統，我注意到在Google Chrome中，當我調整窗口大小時（從小到大），設計響應迅速，Divs保持其比例大小。 在Mozilla Firefox中情況並非如此，雖然class="container-fluid" Divs會在調整行級別div的情況下拉伸它們的小尺寸（它們不會變大，不會伸展） 。 我嘗試在.col-xs-*類之后添加.col-sm-* ，但這沒有效果/沒有區別（請參閱代碼中的注釋）。 我犯了一個愚蠢的，錯誤的錯誤嗎？ 我可以通過Bootstrap文檔回答我的問題嗎？

<header>
    <div class="container-fluid header">
        <div class="row">
            <div class="col-xs-2">&#9776;</div>
            <div class="col-xs-8 text-center">
                <img src="../img/some-image.png" alt="Some Image">
                <span class="strapline">Nice Strap line</span>
            </div>
            <div class="col-xs-2 col-sm-2 text-right"> + </div>
        </div>
    </div>

    <div class="container-fluid search">
        <div class="row">
            <div class="col-xs-3"></div>
            <div class="col-xs-6 text-center"></div>
            <div class="col-xs-3 text-right"></div>
        </div>
    </div>

    <!--col-sm-* added here... -->
    <div class="container-fluid filter-menu">
        <div class="row">
            <div class="col-xs-4 col-sm-4 filter-buttons">
                Menu Button 1
                <span class="filter-green">12.03.14, 12:30</span>
            </div>
            <div class="col-xs-4 col-sm-4 filter-buttons">
                Menu Filter
                <span class="green-count">1</span>
            </div>
            <div class="col-xs-4 col-sm-4 filter-buttons-last">
                Sort By
                <span class="filter-green">Rating</span>
            </div>
        </div>
    </div>
</header>

請注意， .filter-green, filter-buttons, .filter-menu, .text-center, .text-right, .header和.search是我自己制作的，並且這些沒有與任何沖突自定義CSS類Bootstrap網格

更新**

請注意，我認為我可能必須使用.row-fluid類和make列相同的高度我在下面的bootstrap類中添加了以下覆蓋

  // bootstrap overwrite...
  .row {
    display: table;
  }

  [class*="col-"] {
    // float: none;
    display: table-cell;
    vertical-align: top;
  }

Answer 1

我剛剛開始使用.row-fluid類而不是.row而我刪除了上面的clearfix overwrite。 問題解決了！