Bootstrap's dropdown buttons not on the same row - html

Question

I'm not sure what I'm doing wrong in my code here, but it's this or CSS related. I'm not sure what CSS setting this would be, but here is my navbar section of my html code.
<!-- 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>
(If anyone is wondering about the names, its for a garry's mod TTT server)
With that code, here is what the complete navbar looks like.
http://i.imgur.com/75cPTRh.png
I would want the two dropdown buttons side by side on that navbar. Now when they are like that, this leads into my next question tied into this. How do you work bootstrap's dropdown CSS if you have more than one button?
This is what I have in my css at the bottom to align the dropdown by the button, so that it is centered correctly below the button and not way over stuck to the left.
.dropdown-menu {
right: 68%;
left: 10%;
}
If there is more than one button, it still centers all buttons to that point on the page. How do I edit their positions individually?

Answer 1

Add btn-group class
<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>

Answer 2

To answer your first question,
you can place your dropdowns inside a structure like this
<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>
You can use col classes like these to make the layout of your page using bootstrap's grid system.
To learn more about them, visit:
http://getbootstrap.com/css/#grid