Question

在我的bootstrap导航栏上，即使导航栏位于图像顶部，我也试图在页面上完整显示。

但我在State state2 = State.enable.disable;以及State state = null; State[] allStates = state.values();和.navbar-wrapper上尝试了100％的宽度但是由于某种原因，导航栏仍然没有达到页面的整个宽度。

实例

这是我的codepen Code View

这是我的codepen Full View

问题如何让导航栏宽度100％正常工作，使其达到页面的整个宽度？

CSS

navbar

HTML

navbar-default

Answer 1

似乎您使用的是.container类，而不是container-fluid类。根据bootstrap文档：

通过更改将任何固定宽度的网格布局转换为全宽布局最外面的.container到.container-fluid。

http://getbootstrap.com/css/#grid-example-fluid

更新了codepen：http://codepen.io/anon/pen/gpWMzJ

Answer 2

您应该使用课程container-fluid代替container。

container具有不同屏幕尺寸（xs，sm，md，lg）的预定义宽度值
container-fluid填充可用的宽度

container也应用了一些填充，通常它们与具有反向边距的row一起使用。

因此，如果您想要全宽，您必须将导航栏连续包裹（在容器内），或者您只是不使用container＆＃39;完全没有。

Answer 3

通过使容器继承自“.navbar-wrapper”，您可以使导航栏的宽度达到页面的整个长度。您可能还想删除“.navbar-wrapper .navbar”中设置的填充

以下样式适合我：见codpen：http://codepen.io/JordanLittell/pen/wadWxv

/ *围绕.navbar的.container上的特殊类，用于将其定位到位。 * /

.navbar-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    left: 0;
    z-index: 20;
}

/* Flip around the padding for proper display in narrow viewports */
.navbar-wrapper > .container {
    padding-right: 0;
    padding-left: 0;
    width: inherit;
}

.navbar-wrapper .navbar {
    width: 100% !important;
}

.navbar-inverse {
  width: 100% !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
  border-radius: 0;
}

.navbar-inverse .nav > li > a {
    color: #FFFFFF;
}

.navbar-inverse .nav > li > a:hover {
    background: none;
}

.navbar-brand a {
    color: #FFFFFF;
}

.main-header-background {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center; 
    background-image: url('http://www.riwakawebsitedesigns.com/external/images/stars/img-stars-2.jpg');
  height: 620px;
  width: 100%;
  margin-bottom: 60px;
}

Bootstrap导航栏100％宽度不起作用

3 个答案: