CSSボタンアライメントの底面

Question

Bootstrapを使用してwebappモバイルを開発中です。私はtextとbuttonの画面を持っています。 text is smallのbuttonがページの下部に表示されますが、text is largeのbuttonがテキストの最後まで続く必要がある場合。

CSSでこれを行う方法は？

HTMLコード：CSSで

<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

？それはできません。ただし、はとなります（アクセス可能であれば）。

参考のためにtextを含めることができません。同じcol-xs-12クラス内のボタンのすぐ上にいくつかを追加しました。うまくいけば、あなたは別のDOMの場所にテキストを持つことによってあなたが持つ可能性のある問題は、解決するのはかなり簡単です。

また、「テキストが小さいとき」は任意で、私の例では30pxのサイズを使用しています。これを自由に変更してください。 jQueryを使って

、それはのようなものを使用して、テキストのフォントサイズに基づいてテキスト/ボタンの位置を変更することが可能です：

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

私はこのhereのフィドルを作成しました。 .textのフォントサイズが30px未満の場合、ボタンはテキストの下に表示されます。 font-sizeの.textが30px以上の場合、ボタンは右側に表示されます。

希望すると便利です。