1

我已经使用这个 SO question的答案（有更多投票）中给出的自定义 CSS 创建了堆叠选项卡。选项卡工作正常，但我无法添加两行，顶行有两个文本输入，底行有一个按钮。使用我的 CSS 代码，第二行位于选项卡面板之外。我怎样才能解决这个问题？

bootply 演示

HTML 代码

<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <h3>
                Tabs -left</h3>
            <div class="tabbable tabs-left">
                <ul class="nav nav-tabs">
                    <li><a href="#a" data-toggle="tab">One</a></li>
                    <li><a href="#b" data-toggle="tab">Two</a></li>
                    <li><a href="#c" data-toggle="tab">Twee</a></li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="a">
                        <div class="row">
                            <div class="col-md-4">
                                <input type="text" class="form-control input-sm" placeholder="Small">
                            </div>
                            <div class="col-md-4">
                                <input type="text" class="form-control input-sm" placeholder="Small">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <button class="btn">
                                    Large</button>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane" id="b">
                        Tab Two
                    </div>
                    <div class="tab-pane" id="c">
                        Tab Three
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

自定义 CSS（来自 SO 问题）

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

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

.tab-content > .active,
.pill-content > .active {
  display: block;
}

.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: 0 0 4px 4px;
     -moz-border-radius: 0 0 4px 4px;
          border-radius: 0 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;
}
4

1 回答 1

2

尝试为.tab-pane div添加溢出：隐藏属性

.tab-pane {
  overflow: hidden;
}

请参阅http://bootply.com/91661上的示例

于 2013-11-04T06:20:50.380 回答