我試圖根據這個answer垂直對齊網格列。然而,輸出的右上角是一片神祕的空白,我不知道如何填充它。神祕的空白空間出現在Safari中的flexbox中
這是我在瀏覽器中看到(Safari瀏覽器版本9.1.2(11601.7.7)):
這裏是我的代碼:
.equal {
display: flex;
flex-wrap: wrap;
}
.equal > div[class^='col-'] {
display: flex;
flex-direction: column;
}
@media screen and (min-width: 768px) {
.equal2,
.equal2 > div[class*='col-'] {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex: 1 0 auto;
}
}
<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap -->
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row equal">
<div class="col-xs-6 col-lg-4">
<p style="word-wrap: break-word;">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
<p>
</div>
<div class="col-xs-6 col-lg-4">
<p style="word-wrap: break-word;">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
<p>
</div>
<div class="col-xs-6 col-lg-4">
<p style="word-wrap: break-word;">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
<p>
</div>
<div class="col-xs-6 col-lg-4">
<p style="word-wrap: break-word;">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
<p>
</div>
<div class="col-xs-6 col-lg-4">
<p style="word-wrap: break-word;">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
<p>
</div>
<div class="col-xs-6 col-lg-4">
<p style="word-wrap: break-word;">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
<p>
</div>
<div class="col-xs-6 col-lg-4">
<p style="word-wrap: break-word;">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
<p>
</div>
</div>
</div>
</body>
</html>
您可以在其他瀏覽器中通過重新創建這個(https://jsbin.com [放置在僞元素clearfix的內容不同的字符。]/zixabu /編輯?HTML,CSS,輸出)。刪除僞元素可以解決問題。 – misterManSam