Question

想要div的水平对齐。左侧的容器（带蓝色边框）可能具有固定的高度。其他容器（带红色边框）应与左蓝色容器水平对齐，而不管蓝色容器的高度如何。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

使用bootstrap时，需要将网格包装在容器元素中。

列自己填充，这就是你在第二列看到填充的原因。如果你不想要它，你可以删除它。（我是内联的，但我建议你添加类似.noRPad的类）

您可能想知道蓝色元素为什么没有填充？确实如此，但实际上你已经将你的border-blue类赋予了列本身。如果您将其移到列中，您将看到与border-red元素相同的结果。

以下是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>

容器的水平对齐

1 个答案: