Пространство между Flexbox на корпусе панели 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 делает с телом панели, чтобы добавить дополнительный интервал по бокам детей? В этом проекте используются компоненты реакции и реакции-начальной загрузки, поэтому я бы хотел использовать встроенный компонент панели реакции-начальной загрузки, если это возможно, поскольку он предоставляет множество стилей и функций, необходимых бесплатно. Но если нет способа переопределить эту проблему с пробелами, я просто использую простой div и делаю все стили с нуля.

Answer 1

Вам нужно удалить следующий код из вашего CSS:

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