bootstrap4 flex justify-content:justify-content-between 问题答案

【问题标题】：bootstrap4 flex justify-content:justify-content-between issuebootstrap4 flex justify-content:justify-content-between 问题
【发布时间】：2018-01-17 21:21:33
【问题描述】：

我正在使用 bootstrap4 flex 实用程序类进行 flex 布局。我无法在 number(01) 和 Add Plan 按钮中应用 justify-content-between css 表示我想要 number(01)左对齐和添加计划按钮右对齐。

这也是使用 bootstrap4 flex 实用程序类还是只使用我们自己的类的好主意，因为我怀疑它会在响应式布局中产生问题？

堆栈片段

.day-block {
  flex-basis: 49%;
  padding: 5px;
  margin: .5%;
  -webkit-box-shadow: 0px 2px 4px 0px #e4e4e4;
  box-shadow: 0px 2px 4px 0px #e4e4e4;
  min-height: 150px;
  display: flex;
  flex-wrap: wrap;
  font: 13px Verdana;
}

.day-block p {
  margin: 5px 0 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<div class="d-flex flex-wrap">
  <div class="day-block">
    <div class="d-flex flex-wrap justify-content-between align-self-start">
      <div class="day-number">01</div>
      <button class="btn-add-plan">+ Add Plan</button>
    </div>
    <div class="align-self-end">
      <div class="added-plan-wrap">
        <p>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</p>
        <p>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</p>
      </div>
    </div>
  </div>
  <div class=" day-block d-flex flex-wrap"></div>
  <div class=" day-block d-flex flex-wrap"></div>
  <div class=" day-block d-flex flex-wrap"></div>
</div>

【问题讨论】：

它实际上确实适用justify-content-between，问题是你的div的宽度。尝试增加width，你会看到。
@MinhDuc 但为什么 div 没有占用 100% 的宽度？
因为你的父 div day-block 正在使用 flex 显示，所以它里面的所有 flex 项目只会包裹它的内容而不是占据整个宽度
@MinhDuc 但在删除 day-block div 中的 flex 后，align-self-end 在下面的 div 中不起作用。我不认为将 width:100% 赋予 div 是真正的解决方案。
我看到你使用flex-basis。你为什么不试试呢

标签： html twitter-bootstrap css flexbox bootstrap-4

【解决方案1】：

day-block 类使<div class="day-block"> 元素成为弹性行容器。

这使得<div class="d-flex flex-wrap justify-content-between align-self-start"> 元素成为一个弹性行项目，一个弹性行项目的默认flex 速记属性是0 1 auto，这意味着它的大小是由它的内容决定的，因此justify-content-between 没有效果。

要使justify-content-between 产生效果，请添加例如内置的col 类，将flex-grow 更改为1，从而使弹性行项目填充其父级的宽度。

注意，由于col 也有填充，我添加了一个自定义类来移除它。

堆栈sn-p

.day-block {
  flex-basis: 49%;
  padding: 5px;
  margin: .5%;
  -webkit-box-shadow: 0px 2px 4px 0px #e4e4e4;
  box-shadow: 0px 2px 4px 0px #e4e4e4;
  min-height: 150px;
  display: flex;
  flex-wrap: wrap;
  font: 13px Verdana;
}

.day-block .col {
  padding: 0;            /*  if you don't want padding, keep this rule  */
}

.day-block p {
  margin: 5px 0 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<div class="d-flex flex-wrap">
  <div class="day-block">

 <!-- added here ⇩ -->
    <div class="col d-flex flex-wrap justify-content-between align-self-start">

      <div class="day-number">01</div>
      <button class="btn-add-plan">+ Add Plan</button>
    </div>
    <div class="align-self-end">
      <div class="added-plan-wrap">
        <p>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</p>
        <p>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</p>
      </div>
    </div>
  </div>
  <div class=" day-block d-flex flex-wrap"></div>
  <div class=" day-block d-flex flex-wrap"></div>
  <div class=" day-block d-flex flex-wrap"></div>
</div>

col 的替代品（因为它有填充）可以是自定义 flex-grow 类：

.flex-grow {
  flex-grow: 1;
}

堆栈sn-p

.day-block {
  flex-basis: 49%;
  padding: 5px;
  margin: .5%;
  -webkit-box-shadow: 0px 2px 4px 0px #e4e4e4;
  box-shadow: 0px 2px 4px 0px #e4e4e4;
  min-height: 150px;
  display: flex;
  flex-wrap: wrap;
  font: 13px Verdana;
}

.flex-grow {
  flex-grow: 1;
}

.day-block p {
  margin: 5px 0 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<div class="d-flex flex-wrap">
  <div class="day-block">

    <!-- added here ⇩ -->
    <div class="flex-grow d-flex flex-wrap justify-content-between align-self-start">

      <div class="day-number">01</div>
      <button class="btn-add-plan">+ Add Plan</button>
    </div>
    <div class="align-self-end">
      <div class="added-plan-wrap">
        <p>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</p>
        <p>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</p>
      </div>
    </div>
  </div>
  <div class=" day-block d-flex flex-wrap"></div>
  <div class=" day-block d-flex flex-wrap"></div>
  <div class=" day-block d-flex flex-wrap"></div>
</div>

【讨论】：

但应用 col 类给了我额外的填充。那么我是否应该也将no-gutters 类应用于它或任何其他解决方案
@BhuwanBhatt 在我的回答中，我专注于展示导致它不起作用的原因。 no-gutters 重置边距，而不是填充。由于 Bootstrap 没有内置的padding: 0 类，您可以创建一个自定义类，或者创建一个自定义的flex-grow 类，而不是使用内置的col。用这两个选项更新了我的答案。

【解决方案2】：

对粗体问题的回答：是的，与 Bootstrap 3 不同，Bootstrap 4 允许您仅使用本机 Bootstrap 4 类完成几乎任何您需要完成的事情，而无需接触 css。

关于剩下的问题：

以下代码完全符合您的要求，无需任何自定义 css：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">


<div class="container">
    <div class="row mt-4">
        <div class="col">
            <div class="d-flex flex-wrap">
                <div class="day-block">
                    <div class="d-flex flex-wrap justify-content-between align-self-start">
                        <div class="day-number">01</div>
                        <button class="btn-add-plan">+ Add Plan</button>
                    </div>
                    <div class="align-self-end">
                        <div class="added-plan-wrap">
                            <p class="mb-3">Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</p> <!-- class "mb" is margin bottom; choose a value between 0 and 5 -->
                            <p>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</p>
                        </div>
                    </div>
                </div>
                <div class=" day-block d-flex flex-wrap"></div>
                <div class=" day-block d-flex flex-wrap"></div>
                <div class=" day-block d-flex flex-wrap"></div>
            </div>
        </div>
    </div>
</div>

注意在第一段的底部边距使用mb-3 类。

另请注意：我所做的唯一一件事就是在没有 CSS 的情况下使用您的代码（在容器行列结构内）。对齐完全如您所愿。

【讨论】：