Question

我正在尝试为智能手机制作一个菜单。平板电脑，但是当我创建它时，它总是溢出我网站的内容。

我想要实现的效果与Twitter Bootstrap website相同 - 当您使用智能手机打开它时，您可以按下按钮，菜单向下滚动并拉出网站内容。

这是我的代码：

<div class="dropdown">
    <button class="navbar-toggle hidden-lg collapsed" data-toggle="dropdown" data-target="navbar-header" type="button">
        <span class="glyphicon glyphicon-collapse-down">
        </span>                     
    </button>
    <div class="col-xs-12 dropdown-menu navbar-inverse" role="menu">
        <a class ="divider" href="#">Accueil</a><br />
        <a class ="divider" href="#">Centres d'Interets</a><br />
        <a class ="divider" href="#">CV</a><br />
        <a class ="divider" href="#">Contact</a><br />
    </div>
</div>

Answer 1

您可以使用文档中的示例作为开头：

<nav class="navbar navbar-default" role="navigation">
  <div class="container">
    ...
  </div>
</nav>

你可以找到它here。

Answer 2

尝试以下代码。礼貌：http://bootswatch.com根据您的要求调整菜单

<div class="navbar navbar-default navbar-fixed-top">
          <div class="container">
            <div class="navbar-header">
              <a href="../" class="navbar-brand">Bootswatch</a>
              <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
            </div>
            <div class="navbar-collapse collapse" id="navbar-main">
              <ul class="nav navbar-nav">
                <li class="dropdown">
                  <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="themes">Themes <span class="caret"></span></a>
                  <ul class="dropdown-menu" aria-labelledby="themes">
                    <li><a href="../default/">Default</a></li>
                    <li class="divider"></li>

                  </ul>
                </li>
                <li>
                  <a href="../help/">Help</a>
                </li>
                <li>
                  <a href="http://news.bootswatch.com">Blog</a>
                </li>
                <li class="dropdown">
                  <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="download">Download <span class="caret"></span></a>
                  <ul class="dropdown-menu" aria-labelledby="download">
                    <li><a href="./bootstrap.min.css">bootstrap.min.css</a></li>
                    <li><a href="./bootstrap.css">bootstrap.css</a></li>
                    <li class="divider"></li>
                    <li><a href="./variables.less">variables.less</a></li>
                    <li><a href="./bootswatch.less">bootswatch.less</a></li>
                    <li class="divider"></li>
                    <li><a href="./_variables.scss">_variables.scss</a></li>
                    <li><a href="./_bootswatch.scss">_bootswatch.scss</a></li>
                  </ul>
                </li>
              </ul>

              <ul class="nav navbar-nav navbar-right">
                <li><a href="http://builtwithbootstrap.com/" target="_blank">Built With Bootstrap</a></li>
                <li><a href="https://wrapbootstrap.com/?ref=bsw" target="_blank">WrapBootstrap</a></li>
              </ul>

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

在上面的代码中，

<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>

在浏览器或小屏幕（手机和标签页）上更改窗口大小时，可获得所需效果。

enter image description here

Twitter Bootstrap等下拉菜单

2 个答案: