css - 在 Bootstrap 中对齐内部面板

Question

伙计们，

我是 bootstrap 的新手，无法将内部面板与外部面板对齐。

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="panel panel-default bs-example">
  <div class="panel-heading">
    <h3 class="panel-title">Outer</h3>
  </div>
  <div class="panel-body">
    <form name="templateForm" class="form-horizontal bs-example" style="min-height: 320px;">

      <div class="form-group">
        <div class="col-sm-4">
          <label for="inputName" class="control-label">Name</label>
          <input type="text" class="form-control" name="name" id="inputName" placeholder="Display Name">
        </div>
      </div>

      <div class="form-group">
        <div class="col-sm-4">
          <button class="btn btn-primary">Submit</button>
        </div>
      </div>
      <div class="panel panel-default" style="padding:0px;">
        <div class="panel-heading">
          <h3 class="panel-title">Description</h3>
        </div>
        <div class="panel-body"></div>
      </div>
    </form>
  </div>
</div>

1) 我希望内部面板(描述)从外部面板的边框开始。 (图像中附加的暗线填充应去除)

2) 我想要某种选项，用户可以在其中折叠/最小化外部面板，默认情况下只有面板标题应该可见。

Answer 1

因此，将 .panel-body 中的 padding:15px 更改为 padding:15px 0(以删除左填充)并添加 padding-left 到 .form-group

这里:

.panel-body {
    padding:15px 0;  
}

.form-group {
  padding-left:15px;
}

Bootstrap :http://www.bootply.com/UV5wsddAoW