Bootstrap选项卡式面板

Question

我试图找出如何获得一个＆＃34;标签面板＆＃34;。我有一个面板和标签菜单工作正常，但面板和标签导航之间存在差距。

我仍然试图弄清楚这个Bootstrap框架，所以任何指导都会受到最高的赞赏。我还附上了一个屏幕截图，其中显示的是[标签式窗格的截图] [1]。我已经删除了所有PHP代码，因此更容易复制。

以下代码：

＆＃13;

＆＃13;

body {
  padding: 10px;
}

#exTab1 .tab-content {
  color: white;
  background-color: #428bca;
  padding: 5px 5px;
}

#exTab2 h3 {
  color: white;
  background-color: #428bca;
  padding: 5px 5px;
}


/* remove border radius for the tab */

#exTab1 .nav-pills > li > a {
  border-radius: 0;
}


/* change border radius for the tab , apply corners on top*/

#exTab3 .nav-pills > li > a {
  border-radius: 4px 4px 0 0;
}

#exTab3 .tab-content {
  color: white;
  background-color: #428bca;
  padding: 5px 5px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="exTab3" class="container">
  <ul class="nav nav-tabs">
    <li class="active">
      <a href="#overview" data-toggle="tab"><strong>Overview</strong></a>
    </li>
    <li><a href="#assets" data-toggle="tab"><strong>Assets</strong></a>
    </li>
    <li><a href="#services" data-toggle="tab"><strong>Services</strong></a>
    </li>

  </ul>

  <div class="tab-content clearfix">

    <div class="tab-pane active" id="overview">
      <!-- Overview -->
      <!-- Default panel contents -->
      <div class="panel-heading"><i class="fa fa-user" center-block style="font-size:inherit;color:orange;"></i> Overview</div>
      <div class="panel-body">
        <p>Your content here</p>
      </div>
      <!-- /Overview -->
      <div class="col-sm-4">
      </div>
    </div>

    <div class="tab-pane" id="assets">
      <!-- Assets -->
      <div class="panel-heading"><i class="fa fa-bug" center-block style="font-size:inherit;color:orange;"></i> Associated Assets</div>
      <div class="panel-body">
        <p>Your content here</p>
        <!-- Table -->
        <!-- /Assets -->
      </div>
    </div>
    <div class="tab-pane" id="services">
      <!-- Services -->
      <div class="panel-heading"><i class="fa fa-bullhorn" center-block style="font-size:inherit;color:orange;"></i> Associated Services</div>
      <div class="panel-body">
        <p>Your content here</p>
      </div>
    </div>
  </div>

＆＃13;

＆＃13;

＆＃13;

https://jsfiddle.net/richss/mxp8qm2a/20/

更新

将工作代码放入我们的＆＃34;门户网站＆＃34;正在拉动样式等，截图：

https://prnt.sc/ieo35u

Answer 1

您的代码几乎可以使用，您只需在启动服务<div>之前添加<div>并关闭资产标签body { padding: 10px; } #exTab1 .tab-content { color: white; background-color: #428bca; padding: 5px 15px; } #exTab2 h3 { color: white; background-color: #428bca; padding: 5px 15px; } /* remove border radius for the tab */ #exTab1 .nav-pills > li > a { border-radius: 0; } /* change border radius for the tab , apply corners on top*/ #exTab3 .nav-pills > li > a { border-radius: 4px 4px 0 0; } #exTab3 .tab-content { color: white; background-color: #428bca; padding: 5px 15px; }。

在此处查看工作演示https://jsfiddle.net/dLpm9hgy/2/

或者在这里：

＆＃13;

＆＃13;

<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 id="exTab3" class="container">
  <ul class="nav nav-tabs">
    <li class="active">
      <a href="#overview" data-toggle="tab"><strong>Overview</strong></a>
    </li>
    <li><a href="#assets" data-toggle="tab"><strong>Assets</strong></a>
    </li>
    <li><a href="#services" data-toggle="tab"><strong>Services</strong></a>
    </li>

  </ul>

  <div class="tab-content clearfix">

    <div class="tab-pane active" id="overview">
      <!-- Overview -->
      <div class="panel panel-default">
        <!-- Default panel contents -->
        <div class="panel-heading"><i class="fa fa-user" center-block style="font-size:inherit;color:orange;"></i> Overview</div>
        <div class="panel-body">
          <p>...</p>
        </div>
      </div>
      <!-- /Overview -->

      <div class="col-sm-4">
      </div>
    </div>
    
    <div class="tab-pane" id="assets">
      <!-- Assets -->
      <div class="panel panel-default">
        <!-- Default panel contents -->
        <div class="panel-heading"><i class="fa fa-bug" center-block style="font-size:inherit;color:orange;"></i> Associated Assets</div>
        <div class="panel-body">

        </div>

        <!-- Table -->

        <!-- /Assets -->
      </div>
    </div>
    <div class="tab-pane" id="services">
      <!-- Services -->
      <div class="panel panel-default">
        <!-- Default panel contents -->
        <div class="panel-heading"><i class="fa fa-bullhorn" center-block style="font-size:inherit;color:orange;"></i> Associated Services</div>
        <div class="panel-body">
          <table class="table">
            <tr>
              <th>Below is a list of associated services for user:</th>

            </tr>


            es -->

        </div>
        <div class="tab-pane" id="4b">

        </div>
      </div>
    </div>

  </div>

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;