Safari

Question

我有一个动态填充博客帖子的页面，我正在使用Bootstrap和flex将它们对齐在网格中。这在Chrome，Firefox和IE11的最新版本中运行得很好，但它在Safari版本8中不起作用。在Safari中，第一行太早包装一个盒子但其他行包裹得很好，这留下了一个奇怪的空白顶行的末尾。

See jsfiddle here

CSS：

.flex-row {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-direction: row;
    flex-wrap: wrap;
}
.single-post {
    padding: 50px 0 0;
    border: 1px solid #000;
    margin-bottom: 10px;
}
.posts__content-section {
    padding: 20px;
}
.button--more {
    padding: 5px;
    text-transform: uppercase;
    color: #fff;
    background: #000;
    font-size: 12px;
}

HTML（为测试添加随机值）：

<div class="container">
    <div class="row flex-row">

        <!-- post -->
        <div class="col-lg-3 col-sm-4 col-xs-3 single-post">
            <div class="col-lg-12 posts__content-section">
                <span>september 30, 2015</span>
                 <h4>this is a really really really really long title</h4>
                 <p>this is a lot of words about stuff</p>
                 <a href="#" class="button--more">Learn More</a>
            </div>
        </div>
        <!-- /post -->
                <!-- post -->
        <div class="col-lg-3 col-sm-4 col-xs-3 single-post">
            <div class="col-lg-12 posts__content-section">
                <span>september 30, 2015</span>
                 <h4>this is a really really really really long title</h4>
                 <p>this is a lot of words about stuff</p>
                 <a href="#" class="button--more">Learn More</a>
            </div>
        </div>
        <!-- /post -->
                <!-- post -->
        <div class="col-lg-3 col-sm-4 col-xs-3 single-post">
            <div class="col-lg-12 posts__content-section">
                <span>september 30, 2015</span>
                 <h4>short title</h4>
                 <a href="#" class="button--more">Learn More</a>
            </div>
        </div>
        <!-- /post -->
                <!-- post -->
        <div class="col-lg-3 col-sm-4 col-xs-3 single-post">
            <div class="col-lg-12 posts__content-section">
                <span>september 30, 2015</span>
                 <h4>this is a really really really really long title</h4>
                 <p>this is a lot of words about stuff and things and stuff and other things and stuff</p>
                 <a href="#" class="button--more">Learn More</a>
            </div>
        </div>
        <!-- /post -->
                <!-- post -->
        <div class="col-lg-3 col-sm-4 col-xs-3 single-post">
            <div class="col-lg-12 posts__content-section">
                <span>september 30, 2015</span>
                 <h4>this is a really really really really long title</h4>
                 <p>this is a lot of words about stuff</p>
                 <a href="#" class="button--more">Learn More</a>
            </div>
        </div>
        <!-- /post -->
                <!-- post -->
        <div class="col-lg-3 col-sm-4 col-xs-3 single-post">
            <div class="col-lg-12 posts__content-section">
                <span>september 30, 2015</span>
                 <h4>sort of long title</h4>
                 <p>some words</p>
                 <a href="#" class="button--more">Learn More</a>
            </div>
        </div>
        <!-- /post -->
                <!-- post -->
        <div class="col-lg-3 col-sm-4 col-xs-3 single-post">
            <div class="col-lg-12 posts__content-section">
                <span>september 30, 2015</span>
                 <h4>this is a really really really really long title</h4>
                 <p>this is a lot of words about stuff</p>
                 <a href="#" class="button--more">Learn More</a>
            </div>
        </div>
        <!-- /post -->
                <!-- post -->
        <div class="col-lg-3 col-sm-4 col-xs-3 single-post">
            <div class="col-lg-12 posts__content-section">
                <span>september 30, 2015</span>
                 <h4>this is a shorter title</h4>
                 <p>and some more words</p>
                 <a href="#" class="button--more">Learn More</a>
            </div>
        </div>
        <!-- /post -->

    </div>
</div>

Answer 1

我觉得很傻。我只需将flex-row放入一个包含所有single-post框的新div中。 See updated jsfiddle here