如何使用Bootstrap將表單輸入與頁面底部對齊？

Question

如何將引導程序表單輸入對齊到頁面底部？ 我嘗試過幾種不同的方法。

它目前的樣子。

我多么希望它看起來。

我需要將form元素對齊到底部，使其看起來像正確的消息輸入。

但是，當我嘗試使用form { position: fixed; bottom: 0; } form { position: fixed; bottom: 0; } form { position: fixed; bottom: 0; }它改變了輸入的格式像這樣。

謝謝您的幫助。

<div class="container-fluid">
  <div class="row">
    <div class="col-md-3 messages">
      <p class="city">Edinburgh Uni <i class="fa fa-graduation-cap"></i><i style="float:right" class="fa fa-sort-desc"></i></p>
      <p class="paddingLeft" style="margin-top:-15px"><i class="fa fa-user-circle"></i> Jack</p>
    </div>
    <div class="col-md-9">
      <h4 style="margin-top:20px">International Business 📈 <i style="float:right" class="fa fa-cog"></i></h4>
      <p class="description"><i class="fa fa-user"></i> 10 | Support group for International Business Students class of 2019.</p>
      <hr>
      <form>
        <div class="form-row">
          <div class="col">
            <input type="text" class="form-control" placeholder="Message">
          </div>
          <button type="submit" class="btn btn-primary">Send</button>
        </div>
      </form>
    </div>
  </div>
</div>

Answer 1

試試這個（使用最合適的位置）：

form { position: fixed; bottom: 0; }

希望這可以幫助 ：）

Answer 2

位置：絕對; 底部：0;

使用表單上的絕對位置，並將其放置在其父級底部0像素; 確保父容器（col-md-9）具有適當的高度以使其工作。