带有Panels CSS问题的Legacy Bootstrap

Question

我正在使用Bootstrap 3中引入的Panel和传统版本的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会发生什么。我认为这就是你想要做的事情。

＆＃13;

＆＃13;

.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
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;