代码之家 › 专栏 › 技术社区 › spring

将div与bottom对齐:我是否错误地使用了“align content end”?

bootstrap-4 twitter-bootstrap css

spring · 技术社区 · 6 年前

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

2 回复 | 直到 6 年前

Carol Skelly 6 年前

你应该做可乐 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

Raqem 6 年前

你可以成为酒吧的家长 display: flex 为了利用它所有有趣的特性。

使用flex的示例:

.left-panel {
 display: flex;
 flex-direction: column;
 justify-content: flex-end;
}

然后,您需要将边距添加到栏本身,以使其位于所需的位置。