将按钮对齐到桌面 div 的底部和移动设备中 div 的左侧

Question

我正在尝试将按钮与此 div 的底部对齐（因此底部与 textarea 的底部齐平）。

Codepen

我可以通过将以下类添加到按钮来做到这一点：

.btn-bottom {
    position: absolute;
    top: 130px;
}

不幸的是，这样做会使按钮在移动设备上完全消失：

如何使按钮与桌面上的 textarea 底部和移动设备上的 textarea 左边缘对齐？

<div class="padding">
    <div class="container">
        <div class="row">
            <h3 class="text-center">Contact Us</h3>
            <h5 class="text-center title-lighter">Our team will respond within 48 hours.</h5>
        </div>
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="col-md-4">
                    <label for="inputname">Name</label>
                    <input type="text" class="form-control" id="inputname">
                </div>
                <div class="col-md-4">
                    <label for="email">E-mail</label>
                    <input type="text" class="form-control" id="email">
                </div>
                <div class="col-md-4">
                    <label for="organization">Organization</label>
                    <input type="text" class="form-control" id="organization">
                </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <div class="col-md-8">
                        <label for="message">Message</label>
                        <textarea class="form-control input-lg" style="min-width: 100%;" rows="5" id="message"></textarea>

                    </div>
                    <div class="col-md-4">

                        <button type="submit" class="btn btn-primary">Submit</button>
                </div>
                </div>
            </div>
        </div>
        <hr />
        </div>

Answer 1

您可以将包含 textarea 和按钮的元素的列设置为 display: inline-block（您必须设置 float: none 才能工作），然后使用 vertical-align: bottom 将元素与底部对齐他们所在的线路。

我还在包含 textarea 和按钮的元素行中添加了一个 .row--mod 类来帮助定位元素。

.row--mod .col-md-8.col-md-offset-2 > * {
  float: none;
  display: inline-block;
  vertical-align: bottom;
}

.row--mod .col-md-8.col-md-offset-2> :first-child {
  margin-right: -4px;
  width: 66.6667%;
}

使用inline-block 会创建额外的间距，您可以摆脱using a number of methods（我选择了负边距）。

请看下面的演示：

body {
  font-size: 12px !important;
  font-family: 'Roboto Condensed', sans-serif !important;
  font-weight: 400 !important;
}

.title-lighter {
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  color: #737373;
}

.centering {
  float: none;
  margin: 0 auto;
}

.btn-centering {
  width: 90% !important;
  margin-left: 5% !important;
  margin-bottom: 5px !important;
}

.padding {
  padding: 80px 0;
}

.contact-form {
  background: #fff;
  margin-top: 10%;
  margin-bottom: 5%;
  width: 70%;
}

.contact-form .form-control {
  border-radius: 1rem;
}

.contact-form form {
  padding: 14%;
}

.contact-form form .row {
  margin-bottom: -7%;
}

.contact-form h3 {
  margin-bottom: 8%;
  margin-top: -10%;
  text-align: center;
  color: #0062cc;
}

.contact-form .btnContact {
  width: 50%;
  border: none;
  border-radius: 1rem;
  padding: 1.5%;
  background: #dc3545;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
}

.btnContactSubmit {
  width: 50%;
  border-radius: 1rem;
  padding: 1.5%;
  color: #fff;
  background-color: #0062cc;
  border: none;
  cursor: pointer;
}

.centered-row {
  text-align: center;
}

.btn-bottom {
  display: table-cell;
  vertical-align: bottom;
}

.box {
  display: table !important;
  width: 100%;
  height: 100%;
}

@media (min-width: 992px)
{
.row--mod .col-md-8.col-md-offset-2 > * {
  float: none;
  display: inline-block;
  vertical-align: bottom;
}

.row--mod .col-md-8.col-md-offset-2> :first-child {
  margin-right: -4px;
  width: 66.6667%;
  
}
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="padding">
  <div class="container">
    <div class="row">
      <h3 class="text-center">Contact Us</h3>
      <h5 class="text-center title-lighter">Our team will respond within 48 hours.</h5>
    </div>
    <div class="row">
      <div class="col-md-8 col-md-offset-2">
        <div class="col-md-4">
          <label for="inputname">Name</label>
          <input type="text" class="form-control" id="inputname">
        </div>
        <div class="col-md-4">
          <label for="email">E-mail</label>
          <input type="text" class="form-control" id="email">
        </div>
        <div class="col-md-4">
          <label for="organization">Organization</label>
          <input type="text" class="form-control" id="organization">
        </div>
      </div>
    </div>
    <div class="row row--mod">
      <div class="col-md-8 col-md-offset-2">
        <div class="col-md-8">
          <label for="message">Message</label>
          <textarea class="form-control input-lg" style="min-width: 100%;" rows="5" id="message"></textarea>

        </div>
        <div class="col-md-4">

          <button type="submit" class="btn btn-primary">Submit</button>
        </div>
      </div>
    </div>
  </div>
  <hr />
</div>