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按鈕對齊底部

回答

相關問題