Question

我正在使用webapp开发Bootstrap手机。我有一个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类内的按钮上方添加了一些内容。希望通过将文本放在不同的DOM位置可能会遇到的任何问题都可以直接解决。

此外，＆＃34;当文字很小时＃34;是任意的，所以我在我的例子中使用了30px的大小。随意修改它。

使用jQuery，可以使用以下内容基于文本的字体大小修改文本/按钮的位置：

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

我创造了这个here的小提琴。当.text的字体大小低于30px时，该按钮将位于文本下方。当font-size .text为30px或更高时，该按钮将位于右侧。

希望这有帮助！

CSS按钮对齐底部

1 个答案: