Css-Bootstrap 面板显示内联溢出

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 覆盖默认的 Bootstrap 列换行。只需将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;
}