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: " "; 
}