Question

我正在努力将列表项（下面的屏幕快照中每张卡中以“每周频率”开头的表格）对齐到Bootstrap卡的底部。我尝试将mt-auto和align-bottom类添加到列表项，以及将align-self: flex-end应用于元素的style属性。我该如何实现？

现在发生了什么（列表项最靠前）：

HTML

<div class="card-deck">
  <div class="card" style="width: 18rem;">
    <div class="card-body d-flex flex-column">
      <ul class="list-group list-group-flush">
        <li class="list-group-item">
          <h5 class="card-title">Exercise for 30 minutes</h5>
          <p class="card-text">It can be running, kickball, swimming, yoga, or anything else that gets your heart pumping!</p>
        </li>
        <li class="list-group-item mt-auto">
          <form>
            <div class="form-group pb-3 mt-auto align-bottom">
              <label for="goal_frequency_select: Exercise for 30 minutes">Weekly frequency</label>
              <select class="form-control" id="goal_frequency_select: Exercise for 30 minutes" data-width="auto">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
                <option>6</option>
                <option>7</option>
              </select>
            </div>
            <input type="hidden" value="Exercise for 30 minutes" name="user_id">
            <button type="submit" class="btn btn-primary mt-auto">Set Goal</button>
          </form>
        </li>
      </ul>
    </div>
    // CARDS 2 and 3
  </div>
</div>

CSS

main.form-group {
  /*center form inputs */
  float: none;
  margin: 0 auto;
}

main {
  /* center contents */
  text-align: center;
}

.card {
  height: 100%;
}

.form-control {
  align-self: flex-end;
}

Answer 1

虽然我没有尝试过，但我不确定是否可以使用无序列表中的列表项来做到这一点。我从列表中删除了表单，并添加了正确的类。

.card {
  min-height: 500px;
}
form {
  width: 100%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container mt-5 mb-5">
  <div class="row">
    <div class="col-6">
      <div class="card-deck">
        <div class="card">
          <div class="card-body d-flex align-items-end flex-column">
            <ul class="list-group list-group-flush">
              <li class="list-group-item">
                <h5 class="card-title">Exercise for 30 minutes</h5>
                <p class="card-text">It can be running, kickball, swimming, yoga, or anything else that gets your heart pumping!</p>
              </li>
            </ul>
            <form class="mt-auto">
              <div class="form-group pb-3 mt-auto align-bottom">
                <label for="goal_frequency_select: Exercise for 30 minutes">Weekly frequency</label>
                <select class="form-control" id="goal_frequency_select: Exercise for 30 minutes" data-width="auto">
                  <option>1</option>
                  <option>2</option>
                  <option>3</option>
                  <option>4</option>
                  <option>5</option>
                  <option>6</option>
                  <option>7</option>
                </select>
              </div>
              <input type="hidden" value="Exercise for 30 minutes" name="user_id">
              <button type="submit" class="btn btn-primary mt-auto">Set Goal</button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

将引导程序列表项与卡的底部对齐

1 个答案: