在内部导航栏上拉动按钮

Question

我在页面上有一个内部导航栏：

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-4">
      Some left side content
    </div>
    <div class="col-sm-8">
      Some right side content
      <div class="navbar navbar-inverse">
        <div class="container">
          <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#">Sub Nav Bar</a>
          </div>
          <div class="collapse navbar-collapse">
              <ul class="nav navbar-nav navbar-right">
                  <li><button type="button" class="btn btn-default navbar-btn">Edit</button></li>
              </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

然而，当我尝试使用'navbar-right'向右拉按钮时，它会将按钮拉出导航栏。

我这样做错了吗？

普拉克： http://plnkr.co/edit/lk61BS5xH9csMhYBabAO?p=preview