css - 使用显示 :flex with Bootstrap 时移除 1px 间隙

Question

在某些浏览器中，例如 Safari 9，以下 Bootstrap 网格在 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. 删除“行”类以及父级“容器”类

或

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>