响应列很快崩溃答案

【问题标题】：Responsive Columns Collapsing Too Soon响应列很快崩溃
【发布时间】：2017-03-02 19:39:49
【问题描述】：

我正在使用 Bootstrap 3，我希望 3 列在不同大小 (lg -> xs) 中保持响应。我正在尝试对每种尺寸使用带有 col-xx-4 的网格系统，但是一旦达到

例子可以看here

我希望灰色框中的红色、绿色和蓝色列始终等于 3 列。也许在 xs 中它们可以折叠，但至少在 768px 视口之前它们应该是彼此相邻的 3 列。

我使用了 col-xs-4，它应该始终保持水平。

摘录我的一些代码：

                <div class="dash-bg">
                  <div class="" style="background: #d5d5d5; height: 500px;">
                    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4" style="background: red; height: 30px;">
                    </div>
                    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4" style="background: blue; height: 30px;">
                    </div>
                    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4" style="background: green; height: 30px;">
                    </div>                        
                  </div>
                </div>

【问题讨论】：

标签： html css twitter-bootstrap grid

【解决方案1】：

好吧，你应该将类“Row”添加到 Header..

代码 sn-p 在这里：

<div class="header row">
    <div class="logo pull-left" style="background:black;">
    </div>
    <div class="pull-right" style="margin-top: 6.2%;">
        <ul class="nav nav-pills">
            <li><a href="#">COMPANY<span class="arrow-down glyphicon glyphicon-play"></span></a></li>
            <li><a href="#">FAQ</a></li>
        </ul>
    </div>
    <!--
    <div class="navbar-header dropdown">
        <button class="navbar-toggle" data-target=".navbar-collapse" data-toggle="dropdown" type="button">              
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>          
            </button>
        <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html"></a>
    </div>
    -->
</div>

定义 DOM 元素 row 将确保任何子 DOM 元素的最大高度将是父 DOM 的最大高度。

【讨论】：

-Rahul- 做到了！我不明白为什么会这样。当宽度给我带来所有问题时，我不明白为什么高度是一个问题。非常感谢您的帮助。
很高兴它解决了这个问题。当您希望该区域与其他区域不同（例如页眉、页脚、容器）时，请确保始终定义行...区域可能与浮动的其他区域重叠属性在第一个区域的元素上给出（在您的情况下为右拉）。请将其标记为答案或投票，以便对其他人有所帮助:-) 问候，Rahul

【解决方案2】：

听起来您需要使用media query 或使用dash-bg {min-width:993px;}

【讨论】：

【解决方案3】：

我有类似的东西，我用

<div class="row">
        <div class="col-md-4">Something</div>
        <div class="col-md-4">Something</div>
        <div class="col-md-4">Something</div>
</div>

您可以查看示例here

【讨论】：