Question

我正在使用 bootstrap4 flex实用程序类进行flex布局。我无法在号码（01）中应用justify-content-between css，并且下方的添加计划按钮表示我想要号码（01）左对齐，添加计划按钮右对齐。

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

Stack Snippet

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

回答粗体问题：是的，与Bootstrap 3不同，Bootstrap 4允许您完成几乎任何您需要使用本机Bootstrap 4类而无需触及CSS的任何内容。

关于问题的其余部分：

以下代码完全符合您的要求，没有任何自定义CSS：

＆＃13;

<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>

＆＃13;

请注意使用mb-3类作为第一段的保证金底部。

另请注意：我唯一要做的就是在没有css的情况下使用您的代码（在容器 - 行 - 列结构中）。对齐完全符合您的要求。

Answer 2

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也有填充，我添加了一个自定义类来删除它。

Stack snippet

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

col的替代方法（因为它有填充符号），可以是自定义flex-grow类：

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

Stack snippet

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

bootstrap4 flex justify-content：justify-content-between-issue

2 个答案: