Remove 1px gap when using display:flex with Bootstrap

Question

In some browsers, such as Safari 9, the following bootstrap grid is leaving a 1px gap on either side of the row element. Why is that?

相关标签:

Answer 1

The gap is caused by the clearfix gap - content: " " - which is on pseudo elements of the bootstrap .row class.

To prevent the gap:

1. Remove the "row" class as well as the parents "container" class

  or

2. Remove the clearfix pseudo element with:

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

Note: Placing "div" before the class selector - .vertical-align - prevents the need for !important

The two examples

Without removing the row class

.a {
  background-color: #eee
}
.b {
  background-color: #ffffd
}
.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>

With the removal of the row class.

The class - .container - also needs to be removed.

.a {
  background-color: #eee
}
.b {
  background-color: #ffffd
}
.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>