twitter-bootstrap，面板问题

Question

使用 Bootstrap css 我正在尝试使用 "panel" 和 "panel-primary" class 构建面板。我的问题是：面板的头部 (class panel-heading) 没有占用 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>

Answer 1

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

.panel-primary {
  padding: 0;
}

Answer 2

divide 面板 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">

twitter-bootstrap，面板问题

twitter-bootstrap, issue with panel

html

css

panel

twitter-bootstrap