如何在导航带中将文本放在导航栏品牌下面？

Question

假设我有一个带有包含文本的导航栏品牌的bootstrap 3导航栏，我该如何添加一个适合该导航栏品牌的小字幕？

Answer 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

Answer 2

这是一种方法：

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

}