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

您应该先设置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

Answer 2

您可以将栏Reference设为父栏，以使用其所有有趣的属性。

flex示例：

Expression

然后，您需要为条形图本身添加边距，以使其位于所需位置。

将div对齐到底部：我是否错误地使用了“ align-content-end”？

2 个答案: