减少booststrap list-inline元素之间的间距

Question

我使用bootstrap list-inline类来设置我的面包屑的样式，但我不喜欢元素之间的间距。我如何减少John，Jane和David之间的距离？

下面是它目前的样子

<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

您都可以覆盖基本的CSS，并添加负缘至li元素，像这样：

.list-inline>li { 
    margin-right: -10px; 
} 

运行下面的代码看看这会产生什么。

.list-inline>li { 
 
\t 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

选项之一是从与CSS元素取出填充。

.no-left-gutter{padding-left:0;} 

并将此类添加到li或一个元素。

<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>