Bootstrap - 在导航栏div之外设置徽标

Question

在此示例网站中：http://twitter.github.io/bootstrap/examples/fluid.html

我想要一个像他们顶部那样的导航栏，但是“项目名称”是我想要一个高度大于导航栏其他部分的徽标，但我希望徽标悬在底部，没有将div调整大小以适应徽标的较大高度。

Answer 1

您可以使用absolute定位徽标元素来实现此目的。这使它脱离了正常的页面流，并允许您更精确地定位它。

.logo {
  position: absolute;
  z-index: 1;
  // Use your own values for anything below this line.
  left: 20px;
  top: 20px;
  height: 50px;
  width: 200px;
}

为此，您需要确保容器元素位于relative，在本例中为navbar div。 z-index可确保徽标显示在导航栏的顶部。

<div class="nav navbar">
  <a class="logo">
    My Logo
  </a>
</div>