html - Bootstrap 的下拉按钮不在同一行

Question

我不确定我在此处的代码中做错了什么，但它与此或 CSS 相关。我不确定这是什么 CSS 设置，但这是我的 html 代码的导航栏部分。

<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
      TTT Stats
      <span class="caret"></span>
    </button>
    <a class="navbar-brand" href="index.php">Scoreboards</a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
      <li role="presentation"><a role="menuitem" tabindex="-1" href="index.php?page=tttkills">Total TTT Kills</a>
      </li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="index.php?page=tttdeaths">Total TTT Deaths</a>
      </li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="index.php?page=traitorkills">TTT kills as a traitor</a>
      </li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="index.php?page=traitorskilled">Traitors killed as an innocent/detective</a>
      </li>
    </ul>
  </div>
  <div class="dropdown2">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-expanded="true">
      Other
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
      <li role="presentation"><a role="menuitem" tabindex="-1" href="index.php?page=playtime">Time Tracker</a>
      </li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="index.php?page=phkills">Total Prophunt Kills</a>
      </li>
    </ul>
  </div>

(如果有人想知道这些名称，那是 garry 的模组 TTT 服务器)

使用该代码，完整的导航栏如下所示。

http://i.imgur.com/75cPTRh.png

我想要在那个导航栏上并排放置两个下拉按钮。现在，当他们是那样的时候，这就引出了我的下一个与此相关的问题。如果你有多个按钮，你如何使用 bootstrap 的下拉菜单 CSS？

这是我在底部的 css 中用来对齐按钮下拉菜单的内容，以便它在按钮下方正确居中，而不是卡在左侧。

.dropdown-menu {
  right: 68%;
  left: 10%;
}

如果有多个按钮，它仍然会在页面上将所有按钮居中到该点。我如何单独编辑他们的位置？

Answer 1

添加 btn-group 类

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="index.php">Scoreboards</a>
                </div>
                <div class="btn-group">
                    <div class="btn-group">
                        <button type="button" class="btn btn-default dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">
                            TTT Stats <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="index.php?page=tttkills">Total TTT Kills</a></li>
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="index.php?page=tttdeaths">Total TTT Deaths</a></li>
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="index.php?page=traitorkills">TTT kills as a traitor</a></li>
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="index.php?page=traitorskilled">Traitors killed as an innocent/detective</a></li>
                        </ul>
                    </div>
                    <div class="btn-group dropdown2">
                        <button type="button" class="btn btn-default dropdown-toggle" id="dropdownMenu2" data-toggle="dropdown">
                            Other <span class="caret"></span> 
                        </button>
                        <ul class="dropdown-menu" role="menu">
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="index.php?page=playtime">Time Tracker</a></li>
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="index.php?page=phkills">Total Prophunt Kills</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </nav>