在某些浏览器(例如Safari 9)中,以下引导网格在行元素的任一侧留下1px间隙.这是为什么？
.a {background-color:#eee}
.b {background-color:#ddd}
.row {background-color:red}
.vertical-align {
display: flex;
align-items: center;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-6 a">Hello</div>
<div class="col-xs-6 b">World</div>
</div>
</div>
<br><br>
<div class="container">
<div class="row vertical-align">
<div class="col-xs-6 a">Hello</div>
<div class="col-xs-6 b">World</div>
</div>
</div>
解决方法
差距是由clearfix gap引起的 – 内容：“” – 它位于bootstrap .row类的伪元素上.
为了防止差距：
>删除“行”类以及父级“容器”类
要么
>删除clearfix伪元素：
div.vertical-align:before,div.vertical-align:after { display: none }
注意：在类选择器 – .vertical-align之前放置“div”可以防止需要！important
这两个例子
不删除行类
.a {
background-color: #eee
}
.b {
background-color: #ddd
}
.row {
background-color: red
}
.vertical-align {
display: flex;
align-items: center;
}
div.vertical-align:before,div.vertical-align:after {
display: none;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-6 a">Hello</div>
<div class="col-xs-6 b">World</div>
</div>
</div>
<br>
<br>
<div class="container">
<div class="row vertical-align">
<div class="col-xs-6 a">Hello</div>
<div class="col-xs-6 b">World</div>
</div>
</div>
随着行类的删除.
类 – .container – 也需要删除.
.a {
background-color: #eee
}
.b {
background-color: #ddd
}
.row {
background-color: red
}
.vertical-align {
display: flex;
align-items: center;
}
div.vertical-align:before,div.vertical-align:after {
display: none;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-6 a">Hello</div>
<div class="col-xs-6 b">World</div>
</div>
</div>
<br>
<br>
<div>
<div class="vertical-align">
<div class="col-xs-6 a">Hello</div>
<div class="col-xs-6 b">World</div>
</div>
</div>
