Question

我一直试图在BOTTOM LEFT和/或BOTTOM RIGHT手边显示自举标签。我在网上找不到任何描述如何执行此操作的信息。我找到的最接近的人显示左右两侧的标签，但是在侧面的顶部，而不是底部。

这是我到目前为止的代码：

<div id="tabHeaderId01" class="tabbable tabs-left">
  <ul id="tabListId" class="nav nav-tabs navbar-right">
    <li id="tabid_One" class="active"><a href="#one" data-toggle="tab">One</a></li>
    <li id="tabid_Two"><a href="#two" data-toggle="tab">Two</a></li>
    <li id="tabid_Twee"><a href="#twee" data-toggle="tab">Twee</a></li>
  </ul>
  <div id="tabContentsId01" class="tab-content">
    <div class="tab-pane active" id="one">
    Secondo sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
   Aliquam in felis sit amet augue.
    </div>
    <div class="tab-pane" id="two">
    Thirdamuno, ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
   Quisque mauris augue, molestie tincidunt condimentum vitae.
    </div>
    <div class="tab-pane" id="twee">
    Lorem ipsum dolor sit amet, charetra varius quam sit amet vulputate.
   Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero.
    </div>
  </div>
</div>

这是css：

  .tabs-right-align
  {
    text-align: right;
    font-size: 0;
    /* prevent floated child bug */
  }
  .tabs-right-align>li 
  {
    display: inline-block;
    clear: left;
    float: none;
    text-align: right;
    font-size: 12px;
  }

/* custom inclusion of right, left and below tabs */

.tabs-below > .nav-tabs,
.tabs-right > .nav-tabs,
.tabs-left > .nav-tabs {
  border-bottom: 0;
}

.nav-tabs
{
  border-bottom: 0px;
}
.tab-content
{
  border-right: 1px solid #ddd;
  border-left: 1px solid #ddd;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

.tab-content > .tab-pane,
.pill-content > .pill-pane {
  display: none;
}

.tab-content > .active,
.pill-content > .active {
  display: block;
  min-height: 100px;
}

.tabs-below > .nav-tabs {
  border-top: 1px solid #ddd;
}

.tabs-below > .nav-tabs > li {
  margin-top: -1px;
  margin-bottom: 0;
}

.tabs-below > .nav-tabs > li > a {
  -webkit-border-radius: 0px 0 4px 4px;
     -moz-border-radius: 0px 0 4px 4px;
          border-radius: 0px 0 4px 4px;
}

.tabs-below > .nav-tabs > li > a:hover,
.tabs-below > .nav-tabs > li > a:focus {
  border-top-color: #ddd;
  border-bottom-color: transparent;
}

.tabs-below > .nav-tabs > .active > a,
.tabs-below > .nav-tabs > .active > a:hover,
.tabs-below > .nav-tabs > .active > a:focus {
  border-color: transparent #ddd #ddd #ddd;
}

.tabs-left > .nav-tabs > li,
.tabs-right > .nav-tabs > li {
  float: none;
}

.tabs-left > .nav-tabs > li > a,
.tabs-right > .nav-tabs > li > a {
  min-width: 74px;
  margin-right: 0;
  margin-bottom: 3px;
}

.tabs-left > .nav-tabs {
  float: left;
  margin-right: 19px;
  border-right: 1px solid #ddd;
}

.tabs-left > .nav-tabs > li > a {
  margin-right: -1px;
  -webkit-border-radius: 4px 0 0 4px;
     -moz-border-radius: 4px 0 0 4px;
          border-radius: 4px 0 0 4px;
}

.tabs-left > .nav-tabs > li > a:hover,
.tabs-left > .nav-tabs > li > a:focus {
  border-color: #eeeeee #dddddd #eeeeee #eeeeee;
}

.tabs-left > .nav-tabs .active > a,
.tabs-left > .nav-tabs .active > a:hover,
.tabs-left > .nav-tabs .active > a:focus {
  border-color: #ddd transparent #ddd #ddd;
  *border-right-color: #ffffff;
}

.tabs-right > .nav-tabs {
  float: right;
  margin-left: 19px;
  border-left: 1px solid #ddd;
}

.tabs-right > .nav-tabs > li > a {
  margin-left: -1px;
  -webkit-border-radius: 0 4px 4px 0;
     -moz-border-radius: 0 4px 4px 0;
          border-radius: 0 4px 4px 0;
}

.tabs-right > .nav-tabs > li > a:hover,
.tabs-right > .nav-tabs > li > a:focus {
  border-color: #eeeeee #eeeeee #eeeeee #dddddd;
}

.tabs-right > .nav-tabs .active > a,
.tabs-right > .nav-tabs .active > a:hover,
.tabs-right > .nav-tabs .active > a:focus {
  border-color: #ddd #ddd #ddd transparent;
  *border-left-color: #ffffff;
}

我有一个bootply演示，现在发生了什么：

http://www.bootply.com/p5Z5uc6Gwb

我有两个问题：

我无法让标签显示在左侧底部。当我尝试做一个＆＃39; navbar-right＆＃39;显然这不起作用。但是没有＆＃39; navbar-bottom＆＃39;，那么如何让标签显示在左侧底部？
我需要能够为封装它的内容设置边框。但是，当我为标签内容设置边框时，它会在一切周围粘贴边框，包括标签。我做错了什么？

提前感谢您的帮助！

Answer 1

将float:left替换为您的css第89行的width:100px。
将border-color: #ddd transparent #ddd #ddd;替换为您的css第109行的border:1px solid #ddd;。
如果您希望标签内容位于右侧，请在下方添加css
```
.tab-content
{
 float: right;
 margin: 0 10px;
}
```

还有很多不需要的css代码。

http://www.bootply.com/RgdCqhNWSv

heres bootply没有不需要的css代码。 http://www.bootply.com/TYLrCsfBH2

Answer 2

基于一些研究和这个技巧https://cleansupersites.com/bootstrap-left-side-tabs/，我发现这个解决方案可能对您有用。

我在那里分叉并修改你的bootply，左右工作标签：http://www.bootply.com/O7jv2YhMBn

以下是Bootstrap 3.3.7的完整摘录

/* tabs top, right-align */

  .tabs-right-align
  {
    text-align: right;
    font-size: 0;
    /* prevent floated child bug */
  }
  .tabs-right-align>li 
  {
    display: inline-block;
    clear: left;
    float: none;
    text-align: right;
    font-size: 12px;
  }

/* custom inclusion of right, left and below tabs */

.tabs-below > .nav-tabs,
.tabs-right > .nav-tabs,
.tabs-left > .nav-tabs {
  border-bottom: 0;
}

.nav-tabs
{
  border-bottom: 0px;
}
.tab-content
{
  border-right: 1px solid #ddd;
  border-left: 1px solid #ddd;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

.tab-content > .tab-pane,
.pill-content > .pill-pane {
  display: none;
}

.tab-content > .active,
.pill-content > .active {
  display: block;
  min-height: 122px;
}

.tabs-below > .nav-tabs {
  border-top: 1px solid #ddd;
}

.tabs-below > .nav-tabs > li {
  margin-bottom: 0;
}

.tabs-below > .nav-tabs > li > a {
  -webkit-border-radius: 0px 0 4px 4px;
     -moz-border-radius: 0px 0 4px 4px;
          border-radius: 0px 0 4px 4px;
}

.tabs-below > .nav-tabs > li > a:hover,
.tabs-below > .nav-tabs > li > a:focus {
  border-top-color: #ddd;
  border-bottom-color: transparent;
}

.tabs-below > .nav-tabs > .active > a,
.tabs-below > .nav-tabs > .active > a:hover,
.tabs-below > .nav-tabs > .active > a:focus {
  border-color: transparent #ddd #ddd #ddd;
}

.tabs-left > .nav-tabs > li,
.tabs-right > .nav-tabs > li {
  float: none;
}

.tabs-left > .nav-tabs > li > a,
.tabs-right > .nav-tabs > li > a {
  min-width: 74px;
  margin-right: 0;
}

.tabs-left > .nav-tabs {
  float: left;
  border-right: 1px solid #ddd;
}

.tabs-left > .nav-tabs > li > a {
  margin-right: -1px;
  -webkit-border-radius: 4px 0 0 4px;
     -moz-border-radius: 4px 0 0 4px;
          border-radius: 4px 0 0 4px;
}

.tabs-left > .nav-tabs > li > a:hover,
.tabs-left > .nav-tabs > li > a:focus {
  border-color: #eeeeee #dddddd #eeeeee #eeeeee;
}

.tabs-left > .nav-tabs .active > a,
.tabs-left > .nav-tabs .active > a:hover,
.tabs-left > .nav-tabs .active > a:focus {
  border-color: #ddd transparent #ddd #ddd;
  *border-right-color: #ffffff;
}

.tabs-right > .nav-tabs {
  float: right;
  margin-left: 19px;
  border-left: 1px solid #ddd;
}

.tabs-right > .nav-tabs > li > a {
  margin-left: -1px;
  -webkit-border-radius: 0 4px 4px 0;
     -moz-border-radius: 0 4px 4px 0;
          border-radius: 0 4px 4px 0;
}

.tabs-right > .nav-tabs > li > a:hover,
.tabs-right > .nav-tabs > li > a:focus {
  border-color: #eeeeee #eeeeee #eeeeee #dddddd;
}

.tabs-right > .nav-tabs .active > a,
.tabs-right > .nav-tabs .active > a:hover,
.tabs-right > .nav-tabs .active > a:focus {
  border-color: #ddd #ddd #ddd transparent;
  *border-left-color: #ffffff;
}
#tabListId {
  width: 150px;
}
.tabs-left .tab-content {
  margin-left: 149px;
  padding: 20px;
}
.tabs-right .tab-content {
  margin-right: 149px;
  padding: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/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"/>
<h2>Tabs left</h2>
  <div id="tabHeaderId01" class="tabbable tabs-left">
  <ul id="tabListId" class="nav nav-tabs">
    <li id="tabid_One" class="active"><a href="#lone" data-toggle="tab">One</a></li>
    <li id="tabid_Two"><a href="#ltwo" data-toggle="tab">Two</a></li>
    <li id="tabid_Twee"><a href="#ltwee" data-toggle="tab">Twee</a></li>
  </ul>
  <div id="tabContentsId01" class="tab-content">
    <div class="tab-pane active" id="lone">
      Secondo sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
      Aliquam in felis sit amet augue.<br>
      Secondo sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
      Aliquam in felis sit amet augue.<br>
      Secondo sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
      Aliquam in felis sit amet augue.<br>
      Secondo sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
      Aliquam in felis sit amet augue.
    </div>
    <div class="tab-pane" id="ltwo">
      Thirdamuno, ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
      Quisque mauris augue, molestie tincidunt condimentum vitae.
    </div>
    <div class="tab-pane" id="ltwee">
      Lorem ipsum dolor sit amet, charetra varius quam sit amet vulputate.
      Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero.
    </div>
  </div>
</div>
<h2>Tabs right</h2>
  <div id="tabHeaderId01" class="tabbable tabs-right">
  <ul id="tabListId" class="nav nav-tabs">
    <li id="tabid_One" class="active"><a href="#rone" data-toggle="tab">One</a></li>
    <li id="tabid_Two"><a href="#rtwo" data-toggle="tab">Two</a></li>
    <li id="tabid_Twee"><a href="#rtwee" data-toggle="tab">Twee</a></li>
  </ul>
  <div id="tabContentsId01" class="tab-content">
    <div class="tab-pane active" id="rone">
      Secondo sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
      Aliquam in felis sit amet augue.<br>
      Secondo sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
      Aliquam in felis sit amet augue.<br>
      Secondo sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
      Aliquam in felis sit amet augue.<br>
      Secondo sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
      Aliquam in felis sit amet augue.<br>
      Secondo sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
      Aliquam in felis sit amet augue.
    </div>
    <div class="tab-pane" id="rtwo">
      Thirdamuno, ipsum dolor rsit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
      Quisque mauris augue, molestie tincidunt condimentum vitae.
    </div>
    <div class="tab-pane" id="rtwee">
      Lorem ipsum dolor sit amet, charetra varius quam sit amet vulputate.
      Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero.
    </div>
  </div>
</div>

如何让引导标签显示在左侧或右侧的底部

2 个答案: