Question

我正在尝试将flex应用于bootstrap 3容器并发现子元素的奇怪行为这是代码。

<div class="container">
   <div class="child">One</div>
   <div class="child">Two</div>
</div>

.container {
  display: flex;
  justify-content: space-between;
}

（参见jsfiddle JSFiddle上的示例）

我无法找出空间之间的问题。

感谢您的帮助。

Answer 1

我认为问题在于您正在使用bootstrap .container中的类名来尝试更改样式。只需使用id而不是classname容器。

#main {
  display: flex;
  justify-content: space-between;
}

<div id="main">
  <div class="child">One</div>
  <div class="child">Two</div>
</div>

Answer 2

不建议将Bootstrap 3与Flexbox结合使用。

也就是说，Bootstraps container类也使用了两个伪元素，因此它们将参与flex容器作为flex项目，这里可以看到它们给它们一个小的宽度/高度和背景颜色。

正如您所看到的，justify-content: space-between;按预期工作。

.container {
  display: flex;
  justify-content: space-between;
}

.container::before, .container::after {
  width: 30px;
  height: 30px;
  background: red;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="child">One</div>
  <div class="child">Two</div>
</div>

一种解决方法是包装

.container .flex {
  display: flex;
  justify-content: space-between;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="flex">
    <div class="child">One</div>
    <div class="child">Two</div>
  </div>
</div>

Bootstrap 3容器，其中包含justify-content：space-between无法正常工作

2 个答案: