CSS-引導面板具有溢出顯示內嵌

Question

方案

首先這裏是我的小提琴：-->https://jsfiddle.net/edxcbn4n/1/<--

正如你可以看到我有第一個選項卡上三個板，但我需要這些面板不是顯示在上面和下面，而是並排顯示，所以我可以使用滾動功能滾動到下一個。我無法弄清楚如何去做。到目前爲止，我迄今爲止所做的所有嘗試都在小提琴手中。

問題

如何使面板顯示並排，這樣我就可以從對面一個到另一個滾動。

Answer 1

使用tab-pane內引導電網..

<div role="tabpanel" class="tab-pane active container-fluid" id="home"> 
      <div class="row"> 
       <div class="col-md-4"><div class="panel panel-default"> 
       <div class="panel-body"> 
        Basic panel example 
       </div> 
      </div></div> 
       <div class="col-md-4"><div class="panel panel-default"> 
       <div class="panel-body"> 
        Basic panel example 
       </div> 
      </div></div> 
       <div class="col-md-4"><div class="panel panel-default"> 
       <div class="panel-body"> 
        Basic panel example 
       </div> 
      </div></div> 
      </div> 
    </div> 

http://www.codeply.com/go/JMdfZvNGDF

編輯：要排在超過3分以上的面板，使用Flexbox的覆蓋默認的引導柱包裝。只需添加flex-row到row

.flex-row > .col-md-4 { 
    display:flex; 
    flex: 0 0 33%; 
    max-width: 33% 
} 

.flex-row { 
    -webkit-flex-wrap: nowrap!important; 
    -ms-flex-wrap: nowrap!important; 
    flex-wrap: nowrap!important; 
    display:flex; 
    -webkit-box-orient: horizontal!important; 
    -webkit-box-direction: normal!important; 
    -webkit-flex-direction: row!important; 
    -ms-flex-direction: row!important; 
    flex-direction: row!important; 
}