容器的水平对齐

Question

希望 div 水平对齐。左边的容器（带有蓝色边框）可能有一个固定的高度。其他容器（带有红色边框）应与左侧蓝色容器水平对齐，无论蓝色容器的高度如何。

.cursor-pointer {
    cursor: pointer;
}

.equal-height {
  display: flex;
  display: -ms-flex;
}

.border-red {
  border-style: solid;
  border-width: 2px;
  border-color: #FF0000;
}
.border-blue {
  border-style: solid;
  border-width: 2px;
  border-color: #2E2EB8;
}
.border-green {
  border-style: solid;
  border-width: 2px;
  border-color: #00CC00;
  margin: 5px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row border-green equal-height">
        <div class="col-xs-6 border-blue">
            <div class="panel panel-default">
                <div class="panel-heading">Z</div>
                <div class="panel-body">
                    a<br>
                    a<br>
                    a<br>
                    a<br>
                    a<br>
                    a<br>a<br>a<br>a<br>a<br>

                </div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="border-red">
                <div class="panel panel-default">
                    <div class="panel-heading">X</div>
                    <div class="panel-body">
                        c<br>
                        c<br>
                        c<br>
                    </div>
                </div>
            </div>
            <div class="border-red">
                <div class="panel panel-default">
                    <div class="panel-heading">Y</div>
                    <div class="panel-body">

                    </div>
                </div>
            </div>
        </div>        
    </div>

Answer 1

使用引导程序时，您需要将网格包装在容器元素中。

列本身具有填充，这就是您在第二列上看到填充的原因。 如果你不想要它，你可以删除它。 （我是内联的，但我建议你添加一些像 .noRPad 这样的类）

您可能想知道为什么蓝色元素没有填充？确实如此，但您实际上将您的蓝色边框类赋予了列本身。如果将它移到列内，您会看到与边框红色元素相同的结果。

这是https://jsfiddle.net/fegm9pc4/的演示

这是一个通过添加类 .noPad https://jsfiddle.net/fegm9pc4/2/ 从列中删除填充的演示

示例：

.cursor-pointer {
cursor: pointer;
}

.equal-height {
  display: flex;
  display: -ms-flex;
}

.border-red {
  border-style: solid;
  border-width: 2px;
  border-color: #FF0000;
  flex-grow: 1;
}
.border-blue {
  border-style: solid;
  border-width: 2px;
  border-color: #2E2EB8;
}
.border-green {
  border-style: solid;
  border-width: 2px;
  border-color: #00CC00;
  margin: 5px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row border-green equal-height">
    <div class="col-xs-6 border-blue">
        <div class="panel panel-default">
            <div class="panel-heading">Z</div>
            <div class="panel-body">
                a<br>
                a<br>
                a<br>
                a<br>
                a<br>
                a<br>a<br>a<br>a<br>a<br>

            </div>
        </div>
    </div>
    <div class="col-xs-6" style="display: flex;flex-direction: column;padding-right: 0;">
        <div class="border-red">
            <div class="panel panel-default">
                <div class="panel-heading">X</div>
                <div class="panel-body">
                    c<br>
                    c<br>
                    c<br>
                </div>
            </div>
        </div>
        <div class="border-red">
            <div class="panel panel-default">
                <div class="panel-heading">Y</div>
                <div class="panel-body">

                </div>
            </div>
        </div>
    </div> 
    </div>
</div>