Question

在这个网站上有很多帮助并且我自己做了一些努力，我终于解决了所有专栏问题。现在我想知道是否有Bootstrap 3方式（没有自定义CSS）来对齐不同的表单控件（Bottstrap自己以及第三方，如JQuery UI）垂直即可。

<form> 本身可以控制其所有孩子的身高（或垂直间距）吗？

下面是我的示例，它显示了有效地不具有相同高度的不同表单控件的实际列配置和标记。

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

    </head>
    <body>

        <div class="container">  
            <div class='row'>
                <form role="form">
                    <div class='col-lg-3'>
                        <div class='col-xs-12 col-md-6 col-lg-12'><div class="form-group thumbnail">Widget 1<br></br>Line #2 for 1</div></div>
                        <div class='col-xs-12 col-md-6 col-lg-12'><div class="form-group"><h2>Widget 2</h2></div></div>
                    </div>

                    <div class='col-lg-3'>
                            <div class='col-xs-12 col-md-6 col-lg-12' ><div class="form-group thumbnail"><label for="widget3">Label for 3:</label><input type="text" class="form-control" placeholder="Widget 3" id="widget3"/></div></div>
                            <div class='col-xs-12 col-md-6 col-lg-12'><div class="form-group thumbnail"><p>Widget 4</p></div>
                    </div></div>

                    <div class='col-lg-3'>
                        <div class=' col-xs-12 col-md-6 col-lg-12'><div class="form-group"><span class="thumbnail">Widget 5</span></div></div>
                        <div class='col-xs-12 col-md-6 col-lg-12'><div class="input group"><input type="text" class="form-control" placeholder="Wdget 6"/><span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span></div></div>
                    </div>
                </form>
            </div>    
        </div>    

        <!-- Latest compiled and minified JavaScripts -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    </body>
</html>

Here is与JSFiddle相同。

还有一件事。在上面的示例中（但不是在我的实际布局中）glyphicon add-on不会显示在<input>元素的右侧，而是显示在下面的堆栈中。我在这做错了什么？有没有我无法注意到的拼写错误？
编辑（0405/14）我的＆＃34; input-group＆＃34;在2014年2月4日，Arbel精确定位了拼写错误。 这不再是问题。

其他问题（2014年3月4日）：

是什么将Widget 3推向md视图的右侧？
如何强制Widget 4和Widget 5在md视图上交换位置（当它们位于不同的行时？我尝试将pull-right类添加到Widget 4没有产生预期的结果。

Answer 1

垂直间距：来自Bootstrap

Bootstrap中的组件使用了一些默认变量设定共同的价值观。

所以你需要编辑这些值。

对于加载项，在最后一行，将<div class="input group">更改为<div class="input-group">

演示： http://jsfiddle.net/PfA9A/1/

Answer 2

对于您的其他问题，我已更新您的JSFiddle here。

1 - Widget 2停留在右侧的原因是因为您需要清除Bootstrap在使用col-xx-xx类时使用的浮动。我通过在包含<div style="clear: both;"></div>类的每个较大div之间插入col-lg-3来完成此操作。或者，您可以将类row添加到这些div中，因为它会为您清除浮动，但会导致边距更改。那会给你class="row col-lg-3"这些div。

2 - 这可能不是最好的＆＃34;解决方案，但您可以复制Widget 4和Widget 5并使用Bootstrap的hidden-xx和visible-xx类。我在窗口小部件4下放置了带有class="visible-md"的Widget 5，并在其类中添加了hidden-md。我完成了与Widget 5完全相反的操作，将Widget 4 pull-right的额外修改改为pull-left，因为你想要它只剩下Widget 6。

更新：

2的替代解决方案。我写了一些jQuery / Javascript，当屏幕变为中等大小时，将交换Widget 4和Widget 5的html（基于Bootstrap文档的992-1200）。

Updated JSFiddle

var widget4 = $('#widget4').html();
var widget5 = $('#widget5').html();

resizeCheck(); //Run on load incase screen loads in medium size

$(window).on('resize', resizeCheck); //Run on window resize

function resizeCheck() {
    var width = $(window).width();

    if(width >= 992 && width < 1200) {
        mediumWidth();
    } else {
        restoreWidgets();
    }
}

function mediumWidth() {    
    $('#widget4').html(widget5);
    $('#widget5').html(widget4);
}

function restoreWidgets() {
    $('#widget4').html(widget4);
    $('#widget5').html(widget5);
}

Answer 3

由于你使用的类的宽度为100％，所以glyphicon会出现在下一行，所以为了解决这个问题，添加一个style =＆＃34; width：80％; float：left＆＃34; ＆安培;类=＆＃34;形状控制＆＃34;进入输入标签（用于文本框）然后将标签放在标签之后......我希望这有帮助

Answer 4

http://jsfiddle.net/PfA9A/6/

      <div class="container">  
<div class='row'>
    <form role="form">
        <div class='col-lg-3'>
          <div class='col-xs-12 col-md-6 col-lg-12'><div class="form-group thumbnail">Widget 1<br/>Line #2 for 1</div></div>
            <div class='col-xs-12 col-md-6 col-lg-12'><div class="form-group"><h2>Widget 2</h2></div></div>
        </div>

        <div class='col-lg-3'>
                <div class='col-xs-12 col-md-6 col-lg-12' ><div class="form-group thumbnail"><label for="widget3">Label for 3:</label><input type="text" class="form-control" placeholder="Widget 3" id="widget3"/></div></div>
                <div class='col-xs-12 col-md-6 col-lg-12 pull-right'><div class="form-group thumbnail"><p>Widget 4</p></div>
        </div></div>

        <div class='col-lg-3'>
            <div class=' col-xs-12 col-md-6 col-lg-12'>
                <div class="form-group">
                    <span class="thumbnail">Widget 5</span>
                </div>
            </div>
            <div class='col-xs-12 col-md-6 col-lg-12'>
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Wdget 6"/>
                    <span class="input-group-addon glyphicon glyphicon-calendar"></span>
                </div>
            </div>
        </div>
    </form>
</div>

glyphicon问题修复了你在表单组中输入错字。

在Bootstrap 3中垂直对齐表单控件

4 个答案: