Flexbox space-bootstrap3面板体之间增加了容器边之间的额外间距

Question

我有一个面板，面板体内有两个孩子，我想将其与面板体的两端对齐。

简单的例子：

<div class="panel panel-default"> 
    <div class="panel-heading"> 
    <h3 class="panel-title">My Panel</h3> 
    </div> 
    <div class="panel-body"> 
    <div class="description"> 
     Product 
    </div> 
    <div class="price"> 
     $100.00 
    </div> 
    </div> 
</div> 

我想用Flexbox的，因为在不同的破发点，这两个孩子（说明和价格）应该在彼此的顶部，而不是并排堆放。

我使用justify-content: space-between，它应该做的根据文档正是我想要的：

的项目是沿主轴线对齐容器内均匀分布。每对相邻物品之间的间距相同。第一个项目与主起始边缘齐平，最后一个项目与主端边缘齐平。

但是，在容器和孩子的侧面之间添加了神秘的额外空间（这不是面板身体填充，我已经删除了它）。我已经追踪到bootstrap3（和/或我的浏览器？），它正在增加这个间距。 这里的的jsfiddle说明不希望的行为： https://jsfiddle.net/7nprsqhm/

有没有办法覆盖任何Bootstrap3是做给面板身体补充各地的孩子们的两边多余的空格？这个项目使用了react和react-bootstrap组件，所以我想尽可能使用内置的react-bootstrap Panel组件，因为它提供了很多免费所需的样式和功能。但是如果没有办法来覆盖这个间距问题，我只会使用普通的div，并从头开始做所有的样式。

Answer 1

您需要从CSS中删除下面的代码：

.panel-body:before { 
    display: table; 
    content: " "; 
}