Question

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

＆＃13;

<!-- 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>

＆＃13;

（如果有人想知道名字，那就是garry的mod TTT服务器）

使用该代码，这是完整导航栏的样子。

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

我希望在该导航栏上并排显示两个下拉按钮。现在，当他们是这样的时候，这导致了我的下一个问题。如果你有多个按钮，你如何使用bootstrap的下拉CSS？

这就是我在底部的css中通过按钮对齐下拉菜单，使其在按钮下方正确居中，而不是卡在左侧。

＆＃13;

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

＆＃13;

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

Answer 1

回答你的第一个问题，你可以把你的下拉列表放在像这样的结构中

<div class="container">
  <div class="row">
    <div class="col-md-2"> <!-- markup for dropdown 1 --> </div>
    <div class="col-md-2"> <!-- markup for dropdown 2 --> </div>
  </div>
</div>

您可以使用这些col类来使用bootstrap的网格系统进行页面布局。要了解有关它们的更多信息，请访 http://getbootstrap.com/css/#grid

Answer 2

添加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>

Bootstrap的下拉按钮不在同一行

2 个答案: