css - 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，在本例中为navbardiv。z-index确保徽标显示在导航栏的顶部。

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