如何垂直对齐长标签，引导3

我有我旁边的输入很长的标签，它不是垂直对齐。如何垂直对齐长标签，引导3

请问有什么方法可以解决吗like it was in Bootstrap 2？

<form class="form-horizontal" role="form"> 
    <div class="form-group"> 
    <label for="input1" class="col-lg-2 control-label">Labdas kjas kljas dlkjasd lksjd  el1</label> 
    <div class="col-lg-10"> 
     <input type="text" class="form-control" id="input1" placeholder="Input1"> 
    </div> 
    </div> 
    <div class="form-group"> 
    <label for="input2" class="col-lg-2 control-label">Label2</label> 
    <div class="col-lg-10"> 
     <input type="password" class="form-control" id="input2" placeholder="Input2"> 
    </div> 
    </div> 
</form>

来源

2014-03-05 Martin Lunak

不是很干净......你需要一个覆盖类添加到长标签，如multiline，然后添加一个定义为类，像这样

.control-label.multiline 
{ 
    padding-top:0; 
}

来源

2014-03-05 22:11:05 Ted

可惜的是我怕我不能这样做，因为我的形式是由框架自动呈现。 –

这里的另一种选择，这可能会或可能不会基于您的实施工作。我用它来处理一些我需要'col'类来占用它们行的全部高度的情况。本质上它告诉浏览器将其解释为表格。这应该允许您将标签垂直对齐到中间。

我把它放在媒体查询中，因为它小于它为我堆叠的。

/* addition for displaying bits as tables to gain cell features */ 
@media (min-width: 769px) { 
    .table-display{display:table; margin:0 -15px; width:100%; } 
    .table-display .row, .table-display .form-group{display:table-row;} 
    .table-display [class*="col"]{float:none; display:table-cell; vertical-align:middle; padding-left:15px; padding-right:15px;} 
}

你会表显示类添加到您的形式： <form class="form-horizontal table-display" role="form">

HTH， -Ted

编辑补充：继承人fiddle- http://jsfiddle.net/eAaa3/ 当然，你需要拉伸框架以拆除它

来源

2014-03-07 14:28:49 Ted

-1

这就是我对我的做法。我实际上使用Bootstrap今天

.control-label{ 
    float:left; 
    vertical-align:middle;   
}

来源

2014-03-07 14:38:02 LOTUSMS

-1 ??????大声笑好，如果你这样说。 – LOTUSMS

我有同样的问题，我用一个表来代替。如果你使用表来实现它，你也可以使用.table和.table响应的bootstrap类。

来源

2015-07-12 11:03:37

如何垂直对齐长标签，引导3

回答

相关问题