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

Question

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

Codepen

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

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

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

如何使按钮在桌面上与文本区域的底部对齐，在移动设备上与文本区域的左边缘对齐？

<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

您可以将包含文本区域和按钮的元素的列设置为display: inline-block（必须设置float: none才能起作用），然后使用vertical-align: bottom进行对齐他们所在的行底部的元素。

我还向元素的行中添加了.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>