Question

我希望使用css在列中获得相同的高度。灰色的必须有相同的高度！

我该怎么做？我试过了：

http://www.bootply.com/vMeGSIHxO7#

（灰色列必须具有相同的动态高度）

Answer 1

一种方法是使用媒体查询来设置高度。给他们所有的课，然后为那个班级设定高度。

据我所知，bootstrap中现在还有一个col-eq-height类（或类似的），但我没有使用它。

编辑 - 有关使用媒体查询方法的进一步说明（可能有一种更简单的方法）：

随着浏览器宽度的变化，内容高度将发生变化。一旦您为每列提供了相关的高度等级，然后从移动向上扩展开始，请使用媒体查询来“重置”适当的高度。

EG：

.height <!--example class, nothing set first as assuming columns will be stacking on top of each other at mobile -->
{
}

@media (min-width: 768px) <!--example change point 1 -->
{
    .height
        {
            height: Xpx;
        }
}

@media (min-width: 992px) <!--example change height 2 -->
{
    .height
        {
            height: Ypx;
        }
}

进一步编辑：

使用两个不同的高度等级：

EG HTML

    <div class="container">
        <div class="row">
            <div class="col-xs-6 height-outer">
                <div class="col-xs-6 height-inner">
                    zxc
                </div>
                <div class="col-xs-6 height-inner">
                    this is my test
                    this is my test
                </div>
            </div>
            <div class="col-xs-6 height-outer">
                <div class="col-xs-6 height-inner">
                    zxc
                </div>
                <div class="col-xs-6 height-inner">
                    this is my test 
                    this is my test
                     this is my test
                    this is my test 
                </div>
            </div>
        </div>
    </div>

EG CSS

        .height-outer
        {
        background: black;
        height: 350px;
        }

        .height-inner
        {
        background: blue;
        height: 320px;
        }

        @media (min-width: 385px) 
        {   .height-outer {height: 190px}
            .height-inner {height: 170px;}
        }

        @media (min-width: 535px) 
        {   .height-outer {height: 100px}
            .height-inner {height: 80px;}
        }

        @media (min-width: 992px) 
        {   .height-outer {height: 70px}
            .height-inner {height: 50px;}
        }

Answer 2

如果我理解你想要做什么，就是创建类似侧边栏和主要部分的东西..

假设您有以下代码

<div id="wrapper">
  <div id="sidebar"> sidebar code goes here </div>
  <div id="main"> main section code goes here </div>
</div>

你可以使用类似下面的css代码

#wrapper{
  background: -webkit-linear-gradient(left, red 25%, blue 25%); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(left, red 25%, blue 25%); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(left, red 25%, blue 25%); /* For Firefox 3.6 to 15 */
  background: linear-gradient(left, red 25%, blue 25%); /* Standard syntax */
}
#sidebar{ width: 25%; }
#main{ width: 75%; }

所以你的包装器div取两个其他div的最大高度并使用它自己的背景颜色

希望有所帮助

使用引导程序在列中具有相同的高度

2 个答案: