如何减少bootstrap面包屑的高度和文本填充？

Question

我只想知道如何减少标准Bootstrap面包屑的文本和框边界之间的高度和垂直填充：

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ol class="breadcrumb">
  <li class="breadcrumb-item active">Home</li>
</ol>
<ol class="breadcrumb">
  <li class="breadcrumb-item"><a href="#">Home</a></li>
  <li class="breadcrumb-item active">Library</li>
</ol>
<ol class="breadcrumb">
  <li class="breadcrumb-item"><a href="#">Home</a></li>
  <li class="breadcrumb-item"><a href="#">Library</a></li>
  <li class="breadcrumb-item active">Data</li>
</ol>

原始

我需要的是什么：（减少条形的刻度以及文本和条形上下边框之间的间距。字体大小保持不变）

Answer 1

通过覆盖bootstrap css

在.breadcrumb类中设置填充

.breadcrumb {
    padding: 2px 15px !important;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ol class="breadcrumb">
  <li class="breadcrumb-item active">Home</li>
</ol>
<ol class="breadcrumb">
  <li class="breadcrumb-item"><a href="#">Home</a></li>
  <li class="breadcrumb-item active">Library</li>
</ol>
<ol class="breadcrumb">
  <li class="breadcrumb-item"><a href="#">Home</a></li>
  <li class="breadcrumb-item"><a href="#">Library</a></li>
  <li class="breadcrumb-item active">Data</li>
</ol>

Answer 2

更改填充

代码：

.breadcrumb {
    padding-top: 0px;
    padding-bottom: 0px;
 }

示例：https://jsfiddle.net/a2v66hrh/

Answer 3

将此添加到您的自定义CSS文件中，例如：

.breadcrumb {
   padding: 4px 15px;
}

Bootstrap定义了8pk的顶部和底部填充。只需使用低于此值的任何值。

Answer 4

只需添加以下css

即可

.breadcrumb {
    padding:1px 15px !important;
 }