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

我试图在输入上方使用带有标签的内联表单。该行末尾有一个按钮，我怎样才能将按钮对齐输入的底部？（请注意，我不想使用form-inline类，因为我想在上面输入标签）Bootstrap表单内嵌上面的标签，位置按钮

<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

来源

2016-08-02 user2954587

错字错误。它不是底部，而是底部。 –

@Leroideion很好的捕获，但仍然没有解决问题 – user2954587

所以你想把按钮的顶部触摸最后输入的底部？ “将按钮对齐输入底部是什么意思？” – Zack

~~你可以使用另一个div和class="row"以下。我修改你的jsfiddle显示它~~

编辑：对不起，我起初误会这里是我的两个解决方案：第一个是增加沿着label与按钮有一定的存文本（尺寸为计算目的），然后设置该标签的visibility与hidden。这是一个jsfiddle，显示了一个例子。这有一个缺点，就是无法用其他类指令很容易地解决这个问题。

其次与您的解决方案类似，但通过手动设置修复div高度为0px，并再次以响应方式混乱。 jsfiddle-2

来源

2016-08-02 13:24:51 Fma

然后按钮将在一个新的行，这不是我想要的 – user2954587

@Fma这不能解决他的问题。他希望在一行中有2个输入的按钮不在额外的行 – DestinatioN

不工作的解决方案。 –

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

来源

2016-08-02 13:54:54

与按钮列不具有相同的高度与其他列：

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

.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

来源

2016-08-02 14:22:06 ocordova

的想法是去除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>

来源

2016-08-02 14:29:21

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

回答

相关问题