Question

如何将引导程序表单输入对齐到页面底部？我尝试过几种不同的方法。

我需要将form元素与底部对齐，使其看起来像是正确的消息输入。

但是，当我尝试使用form { position: fixed; bottom: 0; }时，它会更改输入格式like so.

感谢您的帮助。

<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）具有适当的高度以使其工作。

如何使用Bootstrap将表单输入与页面底部对齐？

2 个答案: