jquery - 如何编辑 Bootstrap 移动折叠下拉菜单布局？

Question

我试图弄清楚当页面处于移动模式(或任何真正会显示汉堡包按钮的模式)时如何为 Bootstrap 创建自定义下拉菜单。我知道如何操作按钮本身，但谷歌搜索后我找不到任何关于创建自定义 Bootstrap 下拉列表的好文章或帖子。

我目前正在使用 Bootstrap 默认使用的“开箱即用”ul/li 列出的菜单，但无法弄清楚如何操作它，以便在使用“移动模式”时切换到这种样式。

这就是我的导航现在的样子:

        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/#home"><img src="/img/logo.png" class="img-responsive"></a>
        </div>

        <div class="navbar-collapse collapse text-center">
            <ul class="nav navbar-nav text-center">

                <li>
                    <a href="/link/">Link</a>
                </li>

                <li>
                    <a href="/link/">Link</a>
                </li>

                <li>
                    <a href="/link/">Link</a>
                </li>

                <li>
                    <a href="/link/">
                        <div class="btn btn-outline btn-sm">Sign Up</div>
                    </a>
                </li>

                <li>
                    <a href="/link/">
                        <div class="btn btn-outline btn-sm">Sign In</div>
                    </a>
                </li>

            </ul>
        </div>

我对我想要做的事情做了一个快速的概念，但我不知道从哪里开始到哪里它不会影响我当前的导航，这只是与右侧对齐的链接/按钮。

任何正确方向的帮助将不胜感激!

Answer 1

这根本不难。这一切都只是 CSS:在列表项中创建一个 div 并在其中放置两个按钮。将它们 float 到其余链接的右侧，因为它们将是第一个 li 元素，但请设置它们的样式。

然后通过删除 float 来调整它们以适应移动设备并添加您想要的任何样式。

查看示例代码片段。

.navbar.navbar-custom .signin {
  float: right;
  position: absolute;
  right: 15px;
}
.navbar.navbar-custom .navbar-nav > li > a {
  color: #ccc;
}
.navbar.navbar-custom a.btn.navbar-btn.btn-sign {
  background: none;
  border-radius: 0;
  font-size: 14px;
  margin-right: 5px;
  margin-left: 5px;
  color: #ccc;
  display: inline-block;
  padding: 6px 10px;
}
@media (max-width: 767px) {
  .navbar.navbar-custom .navbar-nav {
    text-align: center;
  }
  .navbar.navbar-custom .navbar-nav > li {
    font-size: 16px;
  }
  .navbar.navbar-custom .navbar-nav > li:not(:first-child) {
    right: 90px;
  }
  .navbar.navbar-custom .navbar-nav > li {
    border-bottom: 1px solid #eee;
  }
  .navbar.navbar-custom a.btn.navbar-btn.btn-sign {
    padding: 7.5px 15px;
    font-size: 20px;
  }
  .navbar.navbar-custom .signin {
    float: none;
    clear: both;
    position: relative;
    right: 0;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-custom ">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-nav"> <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button>
      <a class="navbar-brand" href="#">
        <img src="http://placehold.it/50x20" class="img-responsive">
      </a>

    </div>
    <div class="navbar-collapse collapse" id="bs-nav">
      <ul class="nav navbar-nav">
        <li class="signin"> <a href="#" class="btn btn-default navbar-btn btn-sign">Sign Up</a>
          <a href="#" class="btn btn-default navbar-btn btn-sign">Sign in</a>

        </li>
        <li> <a href="/link/">Link</a>

        </li>
        <li> <a href="/link/">Link</a>

        </li>
        <li> <a href="/link/">Link</a>

        </li>
        <li> <a href="/link/">Link</a>

        </li>
      </ul>
    </div>
  </div>
</nav>