使用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间隙引起的content: " "- 这是在bootstrap .row类的伪元素上.

为了防止差距:

1. 删除"行"类以及父级"容器"类

  要么

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