使用 Bootstrap 面板类的一般良好实践答案

【问题标题】：General Good Practice Using Bootstrap panel class使用 Bootstrap 面板类的一般良好实践
【发布时间】：2014-06-07 13:41:11
【问题描述】：

所以我已经使用 Bootstrap 的面板类几个月了，我无法确定我对面板类所做的事情是否好。所以我曾经像这样使用面板类

  <div class="container clearfix">
        <div class="row">
            <div class="col-md-12">

                <div class="panel panel-default">

                    <div class="panel-heading">

                    </div>

                    <div class="panel-body">

                    </div>

                    <div class="panel-footer">

                    </div>

                </div>

            </div>
        </div>
    </div>

我会将面板类包装在 col-md-12 中。
我还发现以下工作：

  <div class="container clearfix">
        <div class="row">

                <div class="panel panel-default">

                    <div class="panel-heading">

                    </div>

                    <div class="panel-body">

                    </div>

                    <div class="panel-footer">

                    </div>

                </div>

        </div>
    </div>

我的问题是，就响应式设计而言，哪种方法更好。他们似乎都有反应。是否有必要将面板 panel-default 及其所有内容包装在具有列类的 div 中，还是已经由具有行类的外部 div 处理？

【问题讨论】：

我不知道哪个更好，但我使用第一个。虽然如果我只使用一个列类，它将是col-xs-12
@Dan，好吧，我也是这么想的，col-xs-12 会更有意义。感谢您的提示
对于响应式设计，无论您是否会使用col-xs-12 (12 -100%) 或不会使用。唯一的区别是col- 类添加了一些填充（不要正确记住，但我认为它是 15px）。可以在下面jsFiddle看到区别。
@Nicolai，我明白了，它仍然响应它只是在左右添加了填充，很酷，谢谢

标签： css twitter-bootstrap responsive-design

【解决方案1】：

根据 Bootstrap 3 code examples，panel 元素不需要包装在 col-**-* 包装器中并将其包装在 col-md-12 中没有意义，因为默认情况下面板采用100% 的 container 宽度。

但是，如果您希望它的宽度不是 100%，而是 33%，则可以将其包装在 col-**-** 类中。

Bootply example

【讨论】：