引导网格内的间距不相等答案

【问题标题】：Spacing not equal within bootstrap grid引导网格内的间距不相等
【发布时间】：2016-01-29 03:23:37
【问题描述】：

我遇到了一个关于引导网格的奇怪问题。代码如下所示：

<div class="row">
                    <div class="col-xs-10 col-xs-offset-1 col-sm-6 col-sm-offset-2">
                       <img src="<?PHP echo _ROOT;?>/public/images/startpage/customer_large.jpg" class="img-responsive"/>
                    </div>
                    <div class="quote_right col-xs-10 col-xs-offset-1 col-sm-2 col-sm-offset-0">
                        <p class="text-center">
                            ‹‹Das Geheimnis des Erfolgs ist, den Standpunkt des anderen zu verstehen.››
                        </p>
                        <p class="text-center">
                            <span class="speaker">Henry Ford</span>
                        </p>
                    </div>
                </div>

在网页上显示的内容：

所以有两件事：

为什么最后一个 div 容器比另一个“宽”？其他框是具有 img-responsive 类的图像。
如何使最后一个 div 与左边的高度相同？

感谢您的建议！

【问题讨论】：

寻求代码帮助的问题必须在问题本身中包含重现该问题所需的最短代码。见How to create a Minimal, Complete, and Verifiable example
stackoverflow.com/questions/19695784/…

标签： css twitter-bootstrap

【解决方案1】：

关于第二个问题，Stackoverflow 上已经有很多可用的解决方案所以，我知道的三个解决方案是可行的......

解决方案 1 使用负边距（不会破坏响应能力）

。排{ 溢出：隐藏； }

[class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}
</pre>

解决方案 2 使用表格

。排 { 显示：表格； }

[class*="col-"] {
    float: none;
    display: table-cell;
    vertical-align: top;
}
</pre>

解决方案 3 使用 flex 于 2015 年 8 月添加。（我真的不喜欢）。排 { 显示：-webkit-box；显示：-webkit-flex；显示：-ms-flexbox；显示：弯曲； }

访问此链接以获得详细的答案。 How can I make Bootstrap columns all the same height?

【讨论】：

感谢这使我朝着正确的方向前进。问候