Question

我第一次使用Bootstrap CSS网格系统，我注意到在Google Chrome中，当我调整窗口大小（从小到大）时，设计具有响应性和流畅性，Divs保持其比例大小。在Mozilla Firefox中情况并非如此，尽管class="container-fluid" Divs将在行类div中调整Div的大小来保持它们的小尺寸（它们不会变大，不会伸展）。我尝试在.col-sm-*类之后添加.col-xs-*，但这没有效果/没有区别（请参阅代码中的注释）。我犯了一个愚蠢的，错误的错误吗？我可以通过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 Grid没有任何冲突

更新**

请注意，我认为我可能必须使用.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。问题解决了！

Bootstrap列无响应/流畅

1 个答案: