css - 将 div 对齐到底部 : Am I using "align-content-end" incorrectly?

Question

我是 BootStrap 的新手(并且是 Web 开发的新手)并且已经看过很多视频教程和文档，但我仍在为布局而苦恼 – 我没有得到任何东西。

我在下面尝试做的是创建左侧面板和右侧面板，它们将包含未显示的其他内容，并使黄色和绿色按钮栏与容器底部对齐，无论面板中有什么其他内容。

我已经研究这个几个小时了。我是否从根本上错误地布置了它，或者我没有在正确的位置使用 align-content-end 类？

(我不知道为什么下面的代码片段会抛出错误 - 它似乎有效)

---

我有什么:

---

我想要的:

#events-tab-container {
  /* background: gray; */
  height: 90vh;
}

#left-panel {
  background: lightcoral;
  border: 1px solid gray;
  border-radius: 10px;
  /* margin-right: 10px; */
}

#right-panel {
  background: lightskyblue;
  border: 1px solid gray;
  border-radius: 10px;
}

#button-bar-left {
  background: yellow;
}

#button-bar-right {
  background: lightgreen;
}

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="events-tab-container" class="container">
  <div class="row h-100">

    <div id="left-panel" class="col col-8">
      left

      <div id="button-bar-left" class="row d-flex justify-content-end align-content-end">
        <button id="cancel-event-btn" class="btn btn-sm btn-secondary mr-2">Cancel</button>
        <button id="save-event-btn" class="btn btn-sm btn-primary mr-2">Save Event</button>
      </div>
    </div>

    <div id="right-panel" class="col col-4">

      right

      <div id="button-bar-right" class="row d-flex justify-content-end align-content-end">
        <button id="new-event-btn" class="btn btn-sm btn-primary mr-2">New Event</button>
      </div>
    </div>
  </div>

  <!-- END EVENTS CONTAINER -->
</div>

Answer 1

你应该制作 cols d-flex flex-column 然后 mt-auto 自动上边距......

<div id="events-tab-container" class="container">
    <div class="row h-100">

        <div id="left-panel" class="col col-8 d-flex flex-column">
            left

            <div id="button-bar-left" class="d-flex mt-auto justify-content-end align-content-end">
                <button id="cancel-event-btn" class="btn btn-sm btn-secondary mr-2">Cancel</button>
                <button id="save-event-btn" class="btn btn-sm btn-primary mr-2">Save Event</button>
            </div>
        </div>

        <div id="right-panel" class="col col-4 d-flex flex-column">

            right

            <div id="button-bar-right" class="d-flex flex-column mt-auto justify-content-end align-items-end">
                <button id="new-event-btn" class="btn btn-sm btn-primary mr-2">New Event</button>
            </div>
        </div>
    </div>
</div>

https://www.codeply.com/go/UGWsZZA4rB