将 display:flex 与 Bootstrap 一起使用时移除 1px 间隙

Question

在某些浏览器（例如 Safari 9）中，以下引导网格会在 row 元素的任一侧留下 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>

Answer 1

间隙是由 clearfix 间隙引起的 - content: " " - 它位于引导程序 .row 类的伪元素上。

为了防止差距：

1. 删除“行”类以及父“容器”类

  或

1. 删除 clearfix 伪元素：

div.vertical-align:before, div.vertical-align:after { display: none }

注意：在类选择器之前放置“div” - .vertical-align - 可以避免使用 !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>