Bootstrap表格内嵌上面的标签，位置按钮

Question

我尝试使用带有输入上方标签的内联表单。线的末尾有一个按钮，如何将按钮与输入的底部对齐？ （请注意，我不想使用form-inline类，因为我想在输入中使用上面的标签）

<div class="col-xs-4">
  <label>Input 1</label>
  <input type="text" class="form-control">
</div>
<div class="col-xs-4">
  <label>Input 2</label>
  <input type="text" class="form-control">
</div>
<div class="col-xs-4">
  <button class="btn btn-primary btn-sm">
    Save
  </button>
</div>

我尝试添加绝对定位

button {
  position: absolute;
  bottom: 0;
}

这是jsfiddle

Answer 1

您可以使用另一个div，class="row"以下label。我修改了你的jsfiddle以显示它

编辑： 对不起我起初误解了这是我的两个解决方案： 第一个是添加visibility以及具有一些转储文本的按钮（用于大小计算），然后将此标签的hidden设置为div。这是一个显示示例的jsfiddle。这具有不响应的缺点，可以使用其他类指令轻松解决。

第二种类似于您的解决方案，但通过手动设置它来修复TextView textView = new TextView(context); textView.layout(0, 0, 140, 180); textView.setTextSize(TypedValue.COMPLEX_UNIT_DIP, 16); textView.setGravity(Gravity.CENTER_VERTICAL); textView.setBackgroundColor(Color.GREEN); textView.setTextColor(Color.BLACK); textView.setText("ABC"); textView.setDrawingCacheEnabled(true); canvas.drawBitmap(textView.getDrawingCache(), scaledX, scaledY, null); 高度为0px，并再次使响应变得混乱。 jsfiddle-2

Answer 2

从按钮中移除position:absolute和bottom:0。您需要覆盖最后一列中为遗漏标签保留的空间。添加margin-top: 28px insetad。

Answer 3

带按钮的列与其他列的高度不同：

如上所述，你可以这样做：

.row .btn {
    margin-top: 5px;
}

我不是一个很喜欢这样做的修正...你可以使用CSS flexbox和Bootstrap来使一行内的列具有相同的高度，只需创建一个类：

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
} 

然后使用<div class="row row-eq-height">代替<div class="row">。

您可以如上所述定义按钮的位置：

.row .btn {
  position: absolute;
  bottom: 0;
}

Live Example in CodePen

来源：Official experimental example of same-height columns using CSS flexbox

Answer 4

我们的想法是删除absolute定位并使用form-control-static类。不幸的是，为了对齐它，我使用的是空标签，这可能不是最干净的解决方案。

检查以下代码：

body {
  margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col-xs-4">
      <label>Input 1</label>
      <input type="text" class="form-control">
    </div>
    <div class="col-xs-4">
      <label>Input 2</label>
      <input type="text" class="form-control">
    </div>
    <div class="col-xs-4">
      <label></label>
      <div class="form-control-static">
        <button class="btn btn-primary btn-sm">
          Save
        </button>
      </div>

    </div>
  </div>
</div>