CSS按钮对齐底部

-3

我正在开发使用Bootstrap的webapp移动设备。我有一个屏幕text和button。当text is smallbutton应该在页面的底部，但是当text is largebutton应该在文本结尾之后。CSS按钮对齐底部

如何用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>

来源

2016-09-21 Luciano Borges

你试过了什么？ – raven

你的代码请 –

请提供HTML和CSS –

使用CSS？它不能做到。不过，它可以用jQuery完成（假设你有访问权限）。

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

此外，“当文字很小”是任意的，所以我在我的例子中使用了30px的大小。随意修改此。

使用jQuery，有可能使用类似修改基于文本的字体大小的文本/按钮的位置：

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

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

希望这会有所帮助！

来源

2016-09-22 04:04:58

CSS按钮对齐底部

回答

相关问题