如何在引导程序中将文本放在导航栏品牌下方？

【问题标题】：How to put text underneath a navbar-brand in bootstrap?如何在引导程序中将文本放在导航栏品牌下方？
【发布时间】：2014-01-16 06:48:59
【问题描述】：

假设我有一个带有包含文本的 navbar-brand 的 bootstrap 3 navbar，如何添加一个适合该 navbar-brand 正下方的小字幕？

【问题讨论】：

您介意添加一些代码吗？ bootply.com/new

标签： twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

@cab 的解决方案有效，但这是另一个不会影响默认导航栏高度的选项（由于增加了填充）：

.navbar-brand {
  line-height:12px;
  padding-top:20px;
  padding-bottom:5px;
}

.navbar-brand small {
  display:block;
  font-size:10px;
}

http://bootply.com/106312

【讨论】：

保留 .navbar-brand 与默认配置并应用 .navbar-brand small 样式对我有用。

【解决方案2】：

这是一种方法：

演示：http://jsbin.com/AFiNehIz/1/edit

HTML

 <a class="navbar-brand" href="#">Project name<small>Tagline goes here</small></a>

CSS

.navbar-brand small {
  display:block;
  font-size:12px;
}

.navbar-toggle {top:10px}

@media (min-width:768px) {
  
  .navbar-brand {
    padding-top:20px;
  }
  
  .nav.navbar-nav a {
    padding-top:30px;
    padding-bottom:30px;
  }

}

【讨论】：