blocks|key|4626443|text|首先，您不应该将导航栏组件包装在div.container中，然后使用以下代码更新css：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4626444|.nav+>+li.dropdown.open+{
++++position:+static;
}
.nav+>+li.dropdown.open+.dropdown-menu+{
++++display:table;+width:+100%25;+text-align:+center;+left:0;+right:0;
}
.dropdown-menu>li+{
++++display:+table-cell;
}|code-block|syntax|javascript|4626445|请在此处查看演示http://www.bootply.com/8EgGsi4F7w|offset|length|4626446|entityMap|0|LINK|mutability|MUTABLE|url|http://www.bootply.com/8EgGsi4F7w^0|0|0|8|X|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>First you shouldn't wrap the navbar component in a div.container then update the css with the following Code:</p>

<pre><code>.nav &gt; li.dropdown.open {
    position: static;
}
.nav &gt; li.dropdown.open .dropdown-menu {
    display:table; width: 100%; text-align: center; left:0; right:0;
}
.dropdown-menu&gt;li {
    display: table-cell;
}
</code></pre>

<p>check the demo here <a href="http://www.bootply.com/8EgGsi4F7w" rel="noreferrer">http://www.bootply.com/8EgGsi4F7w</a></p>


blocks|key|4626458|text|Check+this|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4626459|​|4626460|.nav+>+li.dropdown.open+{
++position:+static;
}

.nav+>+li.dropdown.open+.dropdown-menu+{
++display:+table;
++border-radius:+0px;
++width:+100%25;
++text-align:+center;
++left:+0;
++right:+0;
}

.dropdown-menu+>+li+{
++display:+table-cell;
++height:+50px;
++line-height:+50px;
++vertical-align:+middle;
}

@media+screen+and+(max-width:+767px)+{
++.dropdown-menu+>+li+{
++++display:+block;
++}
}|code-block|syntax|javascript|4626461|<link+rel="stylesheet"+href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script+src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script+src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

<div+class="navbar+navbar-default+navbar-static-top">
++<div+class="container">

++++<div+class="navbar-header">
++++++<div+class="navbar-brand">Blackcat</div>
++++++<button+class="navbar-toggle"+data-toggle="collapse"+data-target=".btnCollapse">
++++++++<span+class="icon-bar"></span>
++++++++<span+class="icon-bar"></span>
++++++++<span+class="icon-bar"></span>
++++++</button>
++++</div>

++++<div+class="collapse+navbar-collapse+btnCollapse">
++++++<ul+class="nav+navbar-nav+navbar-right">
++++++++<li+class="active"><a+href="#">Shop</a></li>
++++++++<li+class="dropdown">
++++++++++<a+href="#"+class="dropdown-toggle"+data-toggle="dropdown">Artist+<span+class="caret"></span></a>
++++++++++<ul+class="dropdown-menu"+role="menu">
++++++++++++<li><a+href="#">Rich</a></li>
++++++++++++<li><a+href="#">Shay</a></li>
++++++++++++<li><a+href="#">Jose</a></li>
++++++++++++<li><a+href="#">Marie</a></li>
++++++++++++<li><a+href="#">Simon</a></li>
++++++++++++<li><a+href="#">Jamie</a></li>
++++++++++++<li><a+href="#">Andrew</a></li>
++++++++++++<li><a+href="#">Teddie</a></li>
++++++++++</ul>
++++++++</li>
++++++++<li><a+href="#">FAQs</a></li>
++++++++<li><a+href="#">Contact</a></li>
++++++</ul>
++++</div>

++</div>
++
</div>



<div+class="container">
++<div+class="row">
++++<p>Site+content+here...</p>
++</div>
++
</div>
|4626462|4626463|entityMap|0|LINK|mutability|MUTABLE|url|https://codepen.io/danielmdesigns/pen/QbgYKa^0|0|A|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@$A|W|B|X|1|Y]]|C|$]]|$1|D|3|E|5|6|7|Z|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|10|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|H|7|11|8|@]|9|@]|C|$I|J]]|$1|M|3|E|5|6|7|12|8|@]|9|@]|C|$]]|$1|N|3|-4|5|6|7|13|8|@]|9|@]|C|$]]]|O|$P|$5|Q|R|S|C|$T|U]]]]

<p><a href="https://codepen.io/danielmdesigns/pen/QbgYKa" rel="nofollow noreferrer">Check this</a></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.nav &gt; li.dropdown.open {
  position: static;
}

.nav &gt; li.dropdown.open .dropdown-menu {
  display: table;
  border-radius: 0px;
  width: 100%;
  text-align: center;
  left: 0;
  right: 0;
}

.dropdown-menu &gt; li {
  display: table-cell;
  height: 50px;
  line-height: 50px;
  vertical-align: middle;
}

@media screen and (max-width: 767px) {
  .dropdown-menu &gt; li {
    display: block;
  }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"&gt;&lt;/script&gt;

&lt;div class="navbar navbar-default navbar-static-top"&gt;
  &lt;div class="container"&gt;

    &lt;div class="navbar-header"&gt;
      &lt;div class="navbar-brand"&gt;Blackcat&lt;/div&gt;
      &lt;button class="navbar-toggle" data-toggle="collapse" data-target=".btnCollapse"&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
      &lt;/button&gt;
    &lt;/div&gt;

    &lt;div class="collapse navbar-collapse btnCollapse"&gt;
      &lt;ul class="nav navbar-nav navbar-right"&gt;
        &lt;li class="active"&gt;&lt;a href="#"&gt;Shop&lt;/a&gt;&lt;/li&gt;
        &lt;li class="dropdown"&gt;
          &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Artist &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
          &lt;ul class="dropdown-menu" role="menu"&gt;
            &lt;li&gt;&lt;a href="#"&gt;Rich&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Shay&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Jose&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Marie&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Simon&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Jamie&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Andrew&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Teddie&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;FAQs&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;

  &lt;/div&gt;
  &lt;!-- end container --&gt;
&lt;/div&gt;
&lt;!-- end navbar navbar-inverse navbar-static-top --&gt;

&lt;!-- container --&gt;
&lt;div class="container"&gt;
  &lt;div class="row"&gt;
    &lt;p&gt;Site content here...&lt;/p&gt;
  &lt;/div&gt;
  &lt;!-- End row --&gt;
&lt;/div&gt;
&lt;!-- End container --&gt;</code></pre>
</div>
</div>
</p>


<p>I need to modify the dropdown-menu provided in Bootstrap, using the navbar-fixed-top, to appear on hover not vertically but horizontally <code>li { display: inline-block }</code> (that's easy), but so I need the actual <code>ul.dropdown-menu</code> to stretch the full width of the page. I can't seem to figure it out.</p>

<p>Don't give me a megamenu plugin or anything, please, just how can I fix it to stretch the width of the whole page? (not the page container either, the window)</p>

<p>Will probably need to wrap another element too, actually, as the ul needs to be centered.</p>

<p>So does anyone know how to do this?</p>

<p>EDIT: Figured it out (like 5 minutes after posting this) and with no added elements:</p>

<pre class="lang-css prettyprint-override"><code>.nav { margin-bottom: 0; }
.dropdown { position: static; }
.dropdown-menu { width: 100%; text-align: center; }
.dropdown-menu&gt;li { display: inline-block; }
</code></pre>

<p>and there you have it!</p>


How to style Bootstrap dropdown-menu to be full page width?

容器

我需要修改Bootstrap中提供的下拉菜单，使用导航栏固定顶部，以显示悬停不是垂直而是水平li { display: inline-block } (这很容易)，但我需要实际的ul.dropdown-menu来拉伸整个页面的宽度。我似乎想不通了。请不要给我一个megamenu插件或任何东西，我该如何修复它才能伸展整个...

问如何将Bootstrap下拉菜单设置为全页宽？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将Bootstrap下拉菜单设置为全页宽？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将Bootstrap下拉菜单设置为全页宽？
EN