css - 带有面板 CSS 问题的遗留 Bootstrap

Question

我将 Bootstrap 3 中引入的面板与旧版本的 Twitter-Bootstrap 一起使用。

我正在尝试将类 well 应用于面板主体，但是当我这样做时，它周围有很多填充。当我在 BS3 中执行此操作时，它看起来不错，所以我想我可能遗漏了一些代码。

这是我的问题的一个例子: http://www.bootply.com/Wnp50MNE23

<div class="panel panel-success">
 <div class="panel-heading">
<span class="panel-title">Panel Title</span>
</div>
  <div class="panel-body well">
    Panel content
  </div>
</div>


.panel {
    padding: 15px;
    margin-bottom: 20px;
    background-color: #ffffff;
    border: 1px solid #dddddd;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  }

  .panel-heading {
    padding: 10px 15px;
    margin: -15px -15px 15px;
    font-size: 17.5px;
    font-weight: 500;      
    background-color: #f5f5f5;
    border-bottom: 1px solid #dddddd;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
  }

这是我的目标，默认情况下它在 BS3 上运行良好:

Answer 1

这是 v3.3.5 中的 .panel CSS 与 v2.3.2 的整个 CSS 添加时发生的情况。我认为这就是您想要做的。

.panel {
    margin-bottom:20px;
    background-color:#fff;
    border:1px solid transparent;
    border-radius:4px;
    -webkit-box-shadow:0 1px 1px rgba(0, 0, 0, .05);
    box-shadow:0 1px 1px rgba(0, 0, 0, .05)
}
.panel-body {
    padding:15px
}
.panel-heading {
    padding:10px 15px;
    border-bottom:1px solid transparent;
    border-top-left-radius:3px;
    border-top-right-radius:3px
}
.panel-heading>.dropdown .dropdown-toggle {
    color:inherit
}
.panel-title {
    margin-top:0;
    margin-bottom:0;
    font-size:16px;
    color:inherit
}
.panel-title>.small, .panel-title>.small>a, .panel-title>a, .panel-title>small, .panel-title>small>a {
    color:inherit
}
.panel-footer {
    padding:10px 15px;
    background-color:#f5f5f5;
    border-top:1px solid #ddd;
    border-bottom-right-radius:3px;
    border-bottom-left-radius:3px
}
.panel-success {
    border-color:#d6e9c6
}
.panel-success>.panel-heading {
    color:#3c763d;
    background-color:#dff0d8;
    border-color:#d6e9c6
}
.panel-success>.panel-heading+.panel-collapse>.panel-body {
    border-top-color:#d6e9c6
}
.panel-success>.panel-heading .badge {
    color:#dff0d8;
    background-color:#3c763d
}
.panel-success>.panel-footer+.panel-collapse>.panel-body {
    border-bottom-color:#d6e9c6
}

<link href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/>
<div class="panel panel-success">
    <div class="panel-heading">
<span class="panel-title">Panel Title</span>

    </div>
    <div class="panel-body well">Panel content</div>
</div>