Question

我有两行Bootstrap 3列，在左列中有一些多行文本，在右列中有一个按钮，我希望按钮的底部与文本的底部成行。 / p>

$this->upload->initialize($config);

在引导程序4中，似乎可以使用align-items-end来完成，是否存在等效于引导程序3的内容？

Answer 1

Bootstrap 3似乎没有内置解决方案来实现此目的，但这应该是一个相当容易的解决方法：

.align-bottom {
    font-size: 0;
}
.align-bottom > * {
    float: none;
    display: inline-block;
    font-size: 14px; /* if using LESS it's quicker to just use @font-size-base */
}
.align-bottom > *:last-child {
    vertical-align: bottom;
}
.align-bottom p:last-child {
    margin-bottom: 0; /* optional */
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row align-bottom">
        <div class="col-sm-6">
          Paul Grenyer<br/>
          XX XXXXX Road<br/>
          Norwich<br/>
          XXX XXX<br/><br/>
          XXXXX XXX XXX
        </div>
        <div  class="col-sm-6 align-items-end">
            <button>Metal</button>
        </div>
    </div>
</div>

此解决方案包含以下几种变体：

How do I bottom-align grid elements in bootstrap fluid layout

Answer 2

基于@Ryan链接中的answer，另一种解决方案是使用flex：

.row-fluid {
   display: flex;
   align-items: flex-end;
}

这是一个完整的示例（另请参见jsFiddle）：

.row {
  background: #f8f9fa;
  margin-top: 20px;
}
.col {
  border: solid 1px #6c757d;
  padding: 10px;
}
.btn-azure {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}
.btn-azure:hover {
   color: #fff !important;
   background-color: #066EDF !important;
 }
.row-fluid {
  display: flex;
  align-items: flex-end;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid">
  <div class="row row-fluid">
    <div class="form-group col-5 col-md-5 ">
      <label for="">Name</label>
      <input class="form-control " type="text" id="inputHrDiariamaxima">
    </div>
    <div class="form-group col-xs-5 col-md-5 ">
      <label for="">E-mail:</label>
      <input class="form-control " type="text" id="inputKmDiariamaxima">
    </div>
    <div class="form-group col-6 col-md-2">
      <button class="btn btn-azure">Go!</button>
    </div>
  </div>
</div>

Bootstrap 3 align-items-end等价

2 个答案: