在引导网格中间距不相等

时间:2016-01-28 19:07:01

标签: css twitter-bootstrap

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

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

在网页上显示内容: enter image description here

所以有两件事:

  1. 为什么最后一个div容器&#34;更宽?&#34;比另一个?其他框是带有img-responsive类的图像。
  2. 如何使最后一个div与左边的div相同?
  3. 感谢您的建议!

1 个答案:

答案 0 :(得分:0)

对于您的第二个问题,Stackoverflow上已有许多解决方案 所以,我知道的三个解决方案......

使用负边距

解决方案1 ​​(不会破坏响应能力)     

    .row{
        overflow: hidden; 
    }

Uncaught RangeError: Maximum call stack size exceeded

Solution 2 using table

    .row {
        display: table;
    }

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

Solution 3 using flex added August 2015.(that I really don't prefer) .row { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }

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