Nyew Nyew - 1 month ago 8
CSS Question

Why I should use after display none for justify-content:space-between?

<header class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="http://qlip.in/images/qlip.png" alt="logo" height="50" width="50">
</a>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-menu" aria-expanded="false">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<nav id="navbar-menu" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#about">About <span class="sr-only">(current)</span></a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
</header>


if i remove

.navbar-default .container:before, .navbar-default .container:after {
display:none
}


in my css

.navbar-default {
background-color: #722872;
border: none;
border-radius: 0;
height: 80px;
}

.navbar-default .container {
display: flex;
flex-wrap: wrap;
align-items:center;
justify-content:space-between;
}

.navbar-default .container:before, .navbar-default .container:after {
display:none
}

.navbar-brand {
height: 80px;
}

.navbar-brand img {
max-height: 50px;
}

nav .navbar-nav li a {
font-size: 13px;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 2px;
padding-top: 10px;
padding-bottom: 10px;
}


I will get this result

enter image description here

instead of
This Result:

enter image description here

I try figure it out but can't find the answer, thank you.

Answer

It's because Bootstrap use the pseudo-elements as a clearfix

.container::before, .container::after {
   display: table;
   content: " ";
}

Unfortunately, when using flexbox instead of floats (which require clearing) these pseudo-elements become flex-children and so are accounted for when laying out the other children in the flexed parent (the container).

The simplest method of overriding the flexy nature is just to tell them to display:none.

.navbar-default {
  background-color: #722872;
  border: none;
  border-radius: 0;
  height: 80px;
}
.navbar-default .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.navbar-default .container:before,
.navbar-default .container:after {
  display: none;
}
.navbar-brand {
  height: 80px;
}
.navbar-brand img {
  max-height: 50px;
}
nav .navbar-nav li a {
  font-size: 13px;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 2px;
  padding-top: 10px;
  padding-bottom: 10px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<header class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img src="http://qlip.in/images/qlip.png" alt="logo" height="50" width="50" />
      </a>
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-menu" aria-expanded="false">
        <span class="sr-only">Toggle Navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <nav id="navbar-menu" class="collapse navbar-collapse">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#about">About <span class="sr-only">(current)</span></a>
        </li>
        <li><a href="#portfolio">Portfolio</a>
        </li>
        <li><a href="#contact">Contact</a>
        </li>
      </ul>
    </nav>
  </div>
</header>

Comments