引導程序中的堆疊標籤3行問題

我已經使用答案中提供的自定義CSS（使用更多投票）this SO question創建了堆棧標籤。標籤工作正常，但我無法設法添加兩行，其中第一行有兩個文本輸入，最後一行有一個按鈕。使用我的CSS代碼，第二行出現在標籤面板之外。我怎樣才能解決這個問題？引導程序中的堆疊標籤3行問題

bootply Demo

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; 
}

來源

2013-11-04 Nalaka526

嘗試添加溢出：隱藏屬性.TAB - 面板格

.tab-pane { 
    overflow: hidden; 
}

查看http://bootply.com/91661

例子

來源

2013-11-04 06:20:50

引導程序中的堆疊標籤3行問題

回答

相關問題