自举3水平双线标签

当标签带两条线时，如何垂直对齐标签和输入？自举3水平双线标签

这里是我的代码：

<form class="form-horizontal"> 
    <div class="form-group"> 
    <label class="control-label col-sm-3" for="passwd_confirm">Confirmation du mot de passe:</label> 
    <div class="col-sm-9"> 
     <input type="password" class="form-control" id="passwd_confirm" maxlength="32"> 
    </div> 
    </div> 
<form>

默认显示是输入和标签的第一行具有相同的基准，但我要对齐的输入与标签的垂直中心。

我该怎么做？

谢谢。

来源

2017-05-24 Arie S.

这是自举3？ –

如果您使用的是bootstrap3，您可以向父级添加一个类，使其成为flex行，然后使用align-items: center垂直居中。您可能还希望通过删除该填充或将其作为填充或边距添加到右列/输入，具体取决于您的布局的其余部分，以匹配.control-label元素的默认padding-top: 7px值。

.form-group.valign { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
@media (min-width: 768px) { 
 
    .valign input { 
 
    margin-top: 7px; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<form class="form-horizontal"> 
 
    <div class="form-group valign"> 
 
    <label class="control-label col-sm-3" for="passwd_confirm">Confirmation du mot<br> de passe:</label> 
 
    <div class="col-sm-9"> 
 
     <input type="password" class="form-control" id="passwd_confirm" maxlength="32"> 
 
    </div> 
 
    </div> 
 
<form>

来源

2017-05-24 17:56:04

谢谢@迈克尔！ Flexbox完美运作。我只是用这个替换媒体查询： media（max-width：768px）{ .form-group.valign { \t display：block; }} 在小屏幕上获取默认行为。 –

@ArieS。真棒，欢迎你:) –

自举3水平双线标签

回答

相关问题