html - 如何在div内绝对定位Bootstrap导航栏而不换行

Question

我正在尝试将导航栏覆盖到背景图像上。我这样做的方法是将其嵌套在 div 中，并使用绝对位置。但是，navbar-header/navbar-brand 部分会导致导航栏的其余部分换行。

示例如下: https://jsfiddle.net/qjxszebe/

我意识到还有一些其他关于创建背景图像的选项，但我想了解为什么这种简单的方法不起作用。

我想要的是修复上面的 fiddle ，以便导航栏如您所期望的那样位于一行上，而不是两行。

解决方案:这是宽度的工作 fiddle :100%:https://jsfiddle.net/69yhavtj/

Answer 1

在 CSS 导航栏中添加 width:100% 位于同一行，而不是低栏。

您应该将图像添加到 class="img-responsive" 类中，因为您的图像不像他们那样具有响应性

   .navbar {
      position: absolute;
      top: 0px;
      width: 100%;
    }