twitter-bootstrap，面板问题答案

【问题标题】：twitter-bootstrap, issue with paneltwitter-bootstrap，面板问题
【发布时间】：2015-04-01 09:49:38
【问题描述】：

使用 Bootstrap css，我正在尝试使用“panel”和“panel-primary”类构建一个面板。我的问题是：面板的头部（类面板标题）不占用 100% 的宽度：https://jsfiddle.net/rcygfpxu/

我的代码是：

<div class="container">
    <div class="row">
        <div class="module panel panel-primary col-xs-12 col-sm-12 col-md-offset-1 col-md-9 col-lg-offset-2 col-lg-8">
            <div class="panel-heading">Subjet Line & Pre Header</div>
            <div class="panel-body form-horizontal">
                <div class="form-group inline-form row">
                    <label class="col-xs-4 col-sm-4 col-md-offset-1 col-md-2 col-lg-offset-1 col-lg-2 control-label" for="subjectLine">Subject Line</label>
                    <div class="col-xs-6 col-sm-6 col-md-8 col-lg-8">
                        <input id="subjectLine" name="subjectLine" type="text" placeholder="" class="form-control input-md">
                    </div>
                </div>
                <div class="form-group inline-form row">
                    <label class="col-xs-4 col-sm-4 col-md-offset-1 col-md-2 col-lg-offset-1 col-lg-2 control-label" for="preHeader">Pre Header</label>
                    <div class="col-xs-6 col-sm-6 col-md-8 col-lg-8">   
                        <input id="preHeader" name="preHeader" type="text" placeholder="" class="form-control input-md">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

【问题讨论】：

只是不要将panel 与col-... 结合使用。将panel 包裹在col-... 中。
那是因为您使用的是 Bootstraps 网格列，它在左侧和右侧添加了填充。面板正在使用 100% 的可用宽度。
您需要删除 col- 因为它们的填充会干扰您的面板。您不需要使用 col-inside 面板。

标签： html css twitter-bootstrap panel

【解决方案1】：

将面板 div 分为 2 个 div - 一个用于面板，一个用于列

https://jsfiddle.net/rcygfpxu/4/

你的版本：

<div class="module panel panel-primary col-xs-12 col-sm-12 col-md-offset-1 col-md-9 col-lg-offset-2 col-lg-8">

新版本：

 <div class="col-xs-12 col-sm-12 col-md-offset-1 col-md-9 col-lg-offset-2 col-lg-8">
    <div class="module panel panel-primary">

【讨论】：

【解决方案2】：

只需在您的样式表中添加此样式，确保您需要从您的父 ID 或类中指向这些样式，这样它就不会影响引导类。

.panel-primary {
  padding: 0;
}

【讨论】：