Twitter Bootstrap Question posted in

Twitter bootstrap – Navbar has unexplained gaps between links

When I hover over the li, theres a gap to the left and I can’t find anything in developer console that explains it.

.custom-nav>li {
  padding: 1.5em 1em;
  border-right: 0.1em solid #ccc;
}
.custom-nav>li>a {
  padding: 1.5em 1em;
}
.custom-nav>li:hover {
  background: #777;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <ul class="list-inline custom-nav">
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </div>
  </div>
</div>
Tags:

3

Answers


  1. 0

    Bootstrap makes the list items inline elements, and inline elements are sensitive to white space. Just remove the white space between them:

    .custom-nav>li {
  padding: 1.5em 1em;
  border-right: 0.1em solid #ccc;
}
.custom-nav>li>a {
  padding: 1.5em 1em;
}
.custom-nav>li:hover {
  background: #777;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <ul class="list-inline custom-nav">
        <li><a href="#">Link</a></li><li><a href="#">Link</a></li><li><a href="#">Link</a></li>
      </ul>
    </div>
  </div>
</div>

    You can also use HTML comments to occupy the white space instead:

    <li><a href="#">Link</a></li><!--
--><li><a href="#">Link</a></li><!--
--><li><a href="#">Link</a></li>
    Login or Signup to reply.
  2. 0

    Line break between inline elements creates a whitespace. There are several ways to fight it: to set font-size of parent to 0px, to remove line breaks, to comment 

    line breaks like that:
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <ul class="list-inline custom-nav"><!--
        --><li><a href="#">Link</a></li><!--
        --><li><a href="#">Link</a></li><!--
        --><li><a href="#">Link</a></li><!--
      --></ul>
    </div>
  </div>
</div>

    Fiddle demo

    Login or Signup to reply.
  3. 0

    I would suggest you to add these CSS options (and then go further with editing CSS):

    .list-inline > li {
    display: block;
    float: left;
    padding-left: 5px;
    padding-right: 5px;
    position: relative;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search