使用display：flex with 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 gap - content: " "引起的 - 它位于bootstrap .row类的伪元素上。

为了防止这种差距：

1. 删除“row”类以及父级“container”类

或

1. 删除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>