Question

我正在尝试使用bootstrap as you can see on this picture创建全宽下拉列表。现在我有这样的事情（我已经从导航列表中删除了不必要的项目）：

<ul class="nav navbar-nav navbar-right">
    <li>
        <a href="/_work/cz.krupovi/www/o-nas">O nás</a>
    </li>
    <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Kalkulačky <span class="caret"></span></a>
        <ul class="dropdown-menu list-inline" role="menu">
            <li><a href="#">RPSN Kalkulačka</a>
            </li>
            <li><a href="#">Inflační kalkulačka</a>
            </li>
        </ul>
    </li>
</ul>

我需要创建dropdown like this one。我没有对导航栏和下拉文件做任何更改 - 这就是为什么我不发布CSS，它是纯粹的Bootstrap 3.2.0 的原因。我刚刚在Chrome中使用CSS规则，禁用它们并更改它们的值（那些与定位有共同点的那些）。

添加了我自己的规则，但我仍然无法弄清楚如何使其100％的视口宽度。可能它从父级继承宽度 - 当然 - 没有视口宽度。这可能是问题所在。

同样I have found this topic但它对我没有帮助。我处于可以获得大约800px宽度下拉的阶段（当我使用width: 100%时），但它在“Kalkulačky”下对齐，如果我希望它在屏幕的左边缘开始，我必须使用{{ 1}}。你有什么想法？我失败了。

请坦白 - 我对CSS并不了解，我刚开始使用Bootstrap。

Answer 1

对于未包含在div.container中的默认导航栏组件，您可以使用以下CSS：

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

demo

display: table-cell也可以替换为display: inline-block;

Answer 2

最好使用此插件

http://geedmo.github.io/yamm3/

HTML 的

<nav class="navbar yamm navbar-default " role="navigation">
...
     <ul class="nav navbar-nav">
       <li class="dropdown">
         <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
         <ul class="dropdown-menu">
           <li>
               <div class="yamm-content">
                  <div class="row"> 
                    ...
           </li>
         </ul>
       </li>
     </ul>
...
</nav>

LESS

/*!
 * Yamm!3 - Yet another megamenu for Bootstrap 3
 * http://geedmo.github.com/yamm3
 * 
 * @geedmo - Licensed under the MIT license
 */

//-----------------------------
//  Yamm Styles
//-----------------------------

.yamm {

  // reset positions 
  .nav, .collapse, .dropup, .dropdown {
    position: static;
  }  

  // propagate menu position under container for fw navbars
  .container {
    position: relative;
  }

  // by default aligns menu to left
  .dropdown-menu {
    left: auto;
  }

  // Content with padding 
  .yamm-content {
    padding: 20px 30px;
  }

  // Fullwidth menu
  .dropdown.yamm-fw .dropdown-menu {
    left: 0; right: 0;
  }

}

Answer 3

你试过这个CSS吗，它可能会有所帮助。

 .dropdown-menu {
      min-width:auto;
      width:100%;
 }

全宽Bootstrap下拉导航

3 个答案: