Question

我正在玩一个使用bootstrap 3的网站，它在主页上有三个div，对于某些浏览器和浏览器窗口大小（*），它们在底部没有排成一行（很多用户的烦恼）。我尝试了各种解决方案，但没有找到解决问题的方法而不会在其他地方造成破坏。

因此，我想知道是否有人可能有任何建议。这是一些代码：

 <div class="container-fluid light-grey-bg">
    <div class="row-fluid text-center">
        <div class="col-md-12">
            <p class="lead main-tagline">A blurb describing the awesome content of this site.</p>
        </div>

        <div class="clearfix"></div>

        <div class="row-eq-height">
            <div class="col-md-4">
                <div class="top-usp">
                    <a href="/first" class="btn btn-lg btn-info">First link</a>
                    <br/><br/>
                    <img src="/img/home/svg/first.svg"width="260px">
                    <p>The first thing described. This description is quite long and tends to wrap at a different place, thereby changing the size of this box in relation to the others.
                    </p>
                </div>
            </div>

            <div class="col-md-4" style="height: 100%;">
                <div class="top-usp">
                    <a href="/second" class="btn btn-lg btn-info">Second</a>
                    <br/><br/>
                    <img src="/img/home/svg/second.svg"> width="260px">
                    <p>A much shorter description for the second item.
                    </p>
                </div>
            </div>

            <div class="col-md-4" style="height: 100%;">
                <div class="top-usp">
                    <a href="/third" class="btn btn-lg btn-info">Third</a>
                    <br/><br/>
                    <img src="/img/home/svg/third.svg"> width="260px">
                    <p>The third item is much like the second.
                    </p>
                </div>
            </div>



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

这里有一些页面的scss：

.home {
  height: 100%;

  .row-eq-height {
    height: 100%;
  }

  .top-usp {
    background-color: white;
    margin: 15px;
    padding: 20px;
    border-radius: 5px;
    min-height: 235px;
    height: 90%;

    -webkit-box-shadow: 2px 2px 0px 0px rgba(204, 204, 202, 1);
    -moz-box-shadow: 2px 2px 0px 0px rgba(204, 204, 202, 1);
    box-shadow: 2px 2px 0px 0px rgba(204, 204, 202, 1);

    }
}

如果有人有时间，任何有关特定尺寸问题的想法都会受到赞赏。

（*）例如iPad，MacBook使用Safari进行播放。这在桌面Chrome上看起来很好。

Answer 1

我尝试了各种选择; flex似乎是最好的，直到盒子移动到小屏幕上的单个列，此时右边缘不对齐。最后，这或多或少做了诀窍：

 /* from the "duplicate" ticket */
.row-eq-height {
    overflow: hidden;
 }

.row-eq-height > [class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
 }


 /* this seems to be the fix */
 .top-usp {
    ....
    min-height: 250px;
    ....
 }

由于负边距不足，高度变化是必要的。

相等的高度divs

1 个答案: