Question

我希望有人可以帮助我。我有以下代码：

<div class="navbar yamm navbar-default" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li class="dropdown yamm-fw">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
                    <ul class="dropdown-menu">
                        <li>
                            <div class="yamm-content">
                                <div class="row"> 
                                    <div class="col-md-6">
                                        Boom 1
                                    </div>
                                    <div class="col-md-6">
                                        Boom 2
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </li>
                <li><a href="#">Nav Item</a></li>
                <li><a href="#">Nav Item</a></li>
                <li><a href="#">Nav Item</a></li>
                <li><a href="#">Nav Item</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="">Login</a></li>
            </ul>
        </div><!--/.nav-collapse -->
    </div>
</div>

哪个工作正常。但是我想让下拉列表的背景为100％宽度，但是因为下拉列表在容器内，所以它不会达到浏览器宽度的全部。

你可以在这里看到一个例子： http://www.bootply.com/9Qy8s3CqMZ 基本上我希望内容保持原样，但灰色背景像导航那样走100％宽度。

有人帮忙吗？

感谢。

CNC中 JSfiddle链接 - jsfiddle.net/on0epsqw/1

Answer 1

只需将.container更改为.container-fuid。

<div class="container-fluid">

Working Example

<强>更新

将您的班级.dropdown-menu更改为：

.dropdown-menu {
    position: fixed;
    top: 50px;
    background-color:#666;
  }

top值应该是导航栏的高度。

此外，只需将类.container添加到具有类.yamm-content的元素。

Working Example

Bootstrap - 100％宽度下拉背景但正常内容宽度

1 个答案: