Question

使用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>

Answer 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">

Answer 2

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

.panel-primary {
  padding: 0;
}

twitter-bootstrap，面板问题

2 个答案: