Bootstrap 表单内嵌上面的标签，位置按钮 [英] Bootstrap form inline with labels above, position button

问题描述

我正在尝试使用在输入上方带有标签的内联表单.行尾有一个按钮，如何将按钮与输入的底部对齐?(请注意，我不想使用 form-inline 类，因为我希望在输入中使用上面的标签)

<label>输入1</label><input type="text" class="form-control">
<div class="col-xs-4"><label>输入 2</label><input type="text" class="form-control">

<div class="col-xs-4"><button class="btn btn-primary btn-sm">节省

我尝试添加绝对定位

按钮 {位置:绝对；底部:0；}

这是一个jsfiddle

解决方案

您可以使用另一个 div 和 class="row" 低于您已有的.我修改了你的 jsfiddle 来显示它

对不起，我一开始误解了这里是我的两个解决方案:第一个是添加一个 label 以及带有一些转储文本的按钮(用于大小计算)，然后将此标签的 visibility 设置为 hidden.这是一个显示示例的 jsfiddle.这具有不响应的缺点，可以使用其他类指令轻松解决.

Second 与您的解决方案类似，但通过手动设置将 div 高度修复为 0px，并再次干扰响应能力.jsfiddle-2

I'm trying to use an inline form with labels above the inputs. There is a button at the end of the line, how can I align the button to the bottom of the inputs? (Note that I do not want to use the form-inline class because I want the labels above in inputs)

<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>

I tried adding absolute positioning

button {
  position: absolute;
  bottom: 0;
}

Here is a jsfiddle

解决方案

You can use another div with class="row" below the one you have. I modified your jsfiddle to show it

Edit: Sorry I misunderstood at first here are my two solutions: First one is to add a label along with button that has some dump text (for size calculation purposes) then set visibility of this label to hidden. Here is a jsfiddle that shows an example. This has the downside of being not responsive which can be easily solved using other class directives.

Second is similar to your solution but fixes div height being 0px by manually settings it and again messes with responsiveness. jsfiddle-2

这篇关于Bootstrap 表单内嵌上面的标签，位置按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！