Reduce spacing between booststrap list-inline elements - html

Question

I'm using bootstrap list-inline class to style my breadcrumbs but I don't like the spacing between the elements. How do I reduce the spacing between John, Jane and David ?
Here's how it currently looks
<ul class="list-inline">
<li>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.google.com" itemprop="url">
<span itemprop="title">John</span>
</a> >
</div>
</li>
<li>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="www.yahoo.com" itemprop="url">
<span itemprop="title">Jane</span>
</a> >
</div>
</li>
<li>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="www.msn.com" itemprop="url">
<span itemprop="title">David</span>
</a>
</div>
</ul>
</li>

Answer 1

You can override the base css and add a negative margin to the li elements like so:
.list-inline>li {
margin-right: -10px;
}
Run the below code snippet to see what this produces.
.list-inline>li {
margin-right: -10px;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<ul class="list-inline">
<li>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.google.com" itemprop="url">
<span itemprop="title">John</span>
</a> >
</div>
</li>
<li>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="www.yahoo.com" itemprop="url">
<span itemprop="title">Jane</span>
</a> >
</div>
</li>
<li>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="www.msn.com" itemprop="url">
<span itemprop="title">David</span>
</a>
</div>
</li>
</ul>

Answer 2

One of the options is to remove the padding from elements with css.
.no-left-gutter{padding-left:0;}
And add this class to li or a elements.
<li class="no-left-gutter">
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.google.com" itemprop="url" class=no-left-gutter>
<span itemprop="title">John</span>
</a>
</div>
</li>

Answer 3

can be fixed by funky code formatting...
<ul class="list-inline">
<li>
List Item One</li><li>
List Item Two</li><li>
List Item Three</li>
</ul>
can be fixed by adding html comments...
<ul class="list-inline">
<li>List Item One</li><!--
--><li>List Item Two</li><!--
--><li>List Item Three</li>
</ul>