减少引导列表内联元素之间的间距答案

【问题标题】：Reduce spacing between booststrap list-inline elements减少引导列表内联元素之间的间距
【发布时间】：2015-02-06 11:46:17
【问题描述】：

我正在使用引导列表内联类来设置面包屑的样式，但我不喜欢元素之间的间距。如何缩小 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>

【问题讨论】：

How to remove the space between inline-block elements? 的可能重复项

标签： html css twitter-bootstrap breadcrumbs

【解决方案1】：

您可以覆盖基本 CSS 并向 li 元素添加负边距，如下所示：

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

运行下面的代码 sn-p 看看会产生什么。

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

【讨论】：

【解决方案2】：

其中一个选项是使用 css 从元素中删除填充。

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

并将这个类添加到 li 或 a 元素中。

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

【讨论】：

【解决方案3】：

可以通过时髦的代码格式来修复...

<ul class="list-inline">
  <li>
   List Item One</li><li>
   List Item Two</li><li>
   List Item Three</li>
</ul>

可以通过添加html cmets来修复...

<ul class="list-inline">
  <li>List Item One</li><!--
  --><li>List Item Two</li><!--
  --><li>List Item Three</li>
</ul>

【讨论】：