将文本与 bootstrap 面板的底部对齐

Question

我想让一些文本与 bootstrap panel 中面板内容的底部对齐。（我正在使用 bootstrap 3.3.7）但是，使用

position: absolute;
bottom: 0;

将其对齐到整个面板的底部——位于页脚中。我希望它与面板内容 div 的底部对齐。但是我不明白为什么要这样做。

下面是正在发生的事情的图像，然后是面板 div 和 'save' 样式的代码。我正在尝试将 'save' 对齐到面板内容 div 的底部，但它进入了页脚。

      <div class="panel panel-default">
        <div class="panel-body editdiv my-textarea" contenteditable>
          Panel content
          <p class="savemet bottom">save</p>
        </div>
        <div class="panel-footer">
          <input type="text" class="poetic" placeholder="e.g. jealousy or loss">
          <div class="idea"></div>
        </div>
      </div>

...

  .bottom {
    position: absolute;
    bottom: 0;
  }

Answer 1

您必须给面板内容 div 一个相对位置，然后给您要放置在底部的项目绝对定位并将该 div 或元素放在面板内内容 div.

Answer 2

来自 position: absolute

的文档

An absolutely positioned element is an element whose computed position value is absolute or fixed. The top, right, bottom, and left properties specify offsets from the edges of the element's containing block. (The containing block is the ancestor relative to which the element is positioned.).

因此您需要将 position: relative 放入您的 panel-content div。

将文本与 bootstrap 面板的底部对齐

Align text to bottom of bootstrap panel

html

css

vertical-alignment

twitter-bootstrap-3