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

在bootstrap3面板主体之间的Flexbox空间之间增加了容器边之间的额外间距

1 个答案: