Уменьшить интервал между элементами вставки-форматированием

Question

Я использую класс списка начальной строки для стилизации моих панировочных сундуков, но мне не нравится расстояние между элементами. Как уменьшить расстояние между Джоном, Джейн и Дэвидом?

Вот как она в настоящее время выглядит

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

Run ниже кода чтобы увидеть, что это производит.

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