Question

我正在使用Bootstrap 3，我希望3列在不同大小（lg - ＆gt; xs）内保持响应。我试图为每个尺寸使用col-xx-4的网格系统，但是当我到达＆lt; 992px时，列开始相互折叠。

示例可以参见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>

Answer 1

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

此处的代码段：

<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元素行将确保任何子DOM元素的最大高度将是父DOM的最大高度。

Answer 2

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

Answer 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

响应列太快崩溃了

3 个答案: