CSS 按钮底部对齐

Question

我正在使用 Bootstrap 开发 webapp 手机。我有一个带有 text 和 button 的屏幕。当text is small时，button应该在页面底部，而当text is large时，button应该在正文末尾。

如何使用 CSS 执行此操作？

HTML代码：

<div id="message" class="container">
            <div class="row">
                <div class="col-xs-12">
                    <h1 class="subject"></h1>
                    <p class="content"></p>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <div class="elapsed"/>
                </div>
            </div>
            <div class="row" style="position: absolute; bottom: 10px; width: 100%;">
                <div class="col-xs-12">
                    <button id="delete" class="btn btn-lg btn-block btn-danger">
                        Excluir
                    </button>
                </div>
            </div>
    </div>

Answer 1

和CSS？这是做不到的。然而，可以用jQuery完成（假设你有权限）。

您的示例中没有包含任何 text 作为参考，因此我直接在按钮上方添加了一些 col-xs-12 class。希望通过将文本放在不同的 DOM 位置而遇到的任何问题都可以很简单地解决。

此外，"when the text is small" 是任意的，所以我在示例中使用了 30px 的大小。请随意修改。

使用 jQuery，可以根据文本的字体大小修改文本/按钮的位置，方法如下：

if ($(".text").css('font-size') >= '30px') {
    $(".text").css("float", "left");
}

我已经为这个 here 创建了一个 fiddle。当 .text 的字体大小小于 30px 时，按钮将位于文本下方。当 .text 的 font-size 为 30px 或更大时，按钮将位于右侧。

希望对您有所帮助！

CSS 按钮底部对齐

CSS button align bottom

css

vertical-alignment

twitter-bootstrap-3