如何将Bootstrap 3导航子菜单与其父菜单对齐

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- 导航栏内容 -->
  </div>
</nav>

<ul class="nav navbar-nav">
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">父菜单 <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <!-- 子菜单项 -->
    </ul>
  </li>
</ul>

<ul class="dropdown-menu">
  <li><a href="#">子菜单项1</a></li>
  <li><a href="#">子菜单项2</a></li>
  <li><a href="#">子菜单项3</a></li>
</ul>

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu-parent .dropdown-menu {
  left: 100%;
  top: 0;
  margin-top: -1px;
}