引导窗体控件组的水平对齐

我有两个带标签的窗体控件。我希望标签显示在控件上方，但控件显示为彼此相邻。我可以弄清楚如何做一个或另一个，但不是两个。引导窗体控件组的水平对齐

我现在有

<div class="control-group"> 
    <label class="control-label" for="select1">Select1</label> 

    <div class="controls"> 
     <select id="select1"> 
      <option value="abc">ABC</option> 
      <option value="def">DEF</option> 
     </select> 
    </div> 
</div> 

<div class="control-group"> 
    <label class="control-label" for="text1">Text1</label> 

    <div class="controls"> 
     <input id="text1"/> 
    </div> 
</div>

的的jsfiddle是http://jsfiddle.net/BA4g7/

如何使彼此水平排列的两个对照组？我需要把它们连成一排吗？

来源

2013-06-21 Jeff Storey

This looks okay：

.control-group { 
    display: inline-block; 
    vertical-align: top; 
}

然而，如果你希望它是保证留在行（而不是与窄屏幕宽度的包裹下），那么你需要用它在另一个div和集white-space: nowrap就此，like this example。

另外，如果你希望它看起来更好，你将需要在文本输入一些尺寸的发挥，something like this looks good in my FF browser：

#text1 { 
    height: 20px; 
    padding: 4px 0; 
}

来源

2013-06-21 18:22:47 ScottS

我认为最好的办法就是在添加自定义CSS类的引导后加载的外部css，用于覆盖您可能想要更改的本机类。我个人每次使用引导程序都会这样做。

所以我创建这个类来解决这个问题

.makeHorizontal{ 
    float:left; 
    padding-left:20px; 
}

现场演示here。

来源

2013-06-21 18:32:25 rkpasia

引导窗体控件组的水平对齐

回答

相关问题