如何在使用nav-stacking时在nav-pills中应用边框？

Question

当我在导航丸中使用导航堆叠时，如何在左侧（或视情况而定）应用边框？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
  <div class="col-md-9">
    <div class="tab-content">
      <div id="states" class="tab-pane fade in active">
        <h3>States</h3>
        <p>States tab</p>
      </div>
      <div id="subs" class="tab-pane fade">
        <h3>Subscriptions</h3>
        <p>Subscriptions tab</p>
      </div>
      <div id="comments" class="tab-pane fade">
        <h3>Comments</h3>
        <p>Comments tab</p>
      </div>
    </div>
  </div>

  <div class="col-md-3">
    <ul class="nav nav-pills nav-stacked" id="myTabs">
      <li class="active">
        <a href="#states" data-toggle="tab">
          States
        </a>
      </li>
      <li>
        <a href="#subs" data-toggle="tab">
          Subscriptions
        </a>
      </li>
      <li>
        <a href="#comments" data-toggle="tab">
          Comments
        </a>
      </li>
    </ul>
  </div>
</div>

Answer 1

你可以像这样实现它并根据你的需要调整它。希望能帮助到你。如果您希望将其应用于所有内容而非仅应用于活动帐户，则需要将.nav-pills> .active修改为.nav-pills> *

＆＃13;

＆＃13;

.nav-pills>li {
  border-left:2px solid #444444;
}

.nav-pills>.active {
  border-right: 2px solid #444444;
  border-top: 2px solid #444444;
  border-bottom: 2px solid #444444;
  border-left:none;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-md-9">
    <div class="tab-content">
      <div id="states" class="tab-pane fade in active">
        <h3>States</h3>
        <p>States tab</p>
      </div>
      <div id="subs" class="tab-pane fade">
        <h3>Subscriptions</h3>
        <p>Subscriptions tab</p>
      </div>
      <div id="comments" class="tab-pane fade">
        <h3>Comments</h3>
        <p>Comments tab</p>
      </div>
    </div>
  </div>

  <div class="col-md-3">
    <ul class="nav nav-pills nav-stacked" id="myTabs">
      <li class="active">
        <a href="#states" data-toggle="tab">
          States
        </a>
      </li>
      <li>
        <a href="#subs" data-toggle="tab">
          Subscriptions
        </a>
      </li>
      <li>
        <a href="#comments" data-toggle="tab">
          Comments
        </a>
      </li>
    </ul>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

更新 - 添加了其他边框，使其看起来像导航标签。