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