Css-Bootstrap 面板显示内联溢出

Question

场景

首先是我的fiddle：--> https://jsfiddle.net/edxcbn4n/1/ <--

如您所见，我在第一个选项卡上有三个面板，但我需要这些面板不显示在上方和下方，而是并排显示，因此我可以使用滚动功能滚动到下一个。我不知道该怎么做。到目前为止我所做和尝试的一切都在 fiddle.

问题

如何让面板并排显示，以便我可以从一个面板滚动到另一个面板。

Answer 1

使用 tab-pane 内的 Bootstrap 网格..

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

Css-Bootstrap 面板显示内联溢出

Css-Bootstrap panels display inline with overflow

css

panel

twitter-bootstrap