如何減少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;
 }