当使用Bootstrap的形式 - 水平时，如何对齐表单元素？ [英] How can I align form elements when using Bootstrap's form-horizontal?

问题描述

我有一个问题使选择下拉列表和按钮与引导。下面是一张图片：

I'm having an issue aligning a select dropdown and a button with Bootstrap. Here's a picture:

这些代码或多或少：

<form class="form-horizontal" action="." method="GET" role="form">
    <div class="form-group">
        <label class="col-lg-4 control-label" for="id_location">Location</label>
        <div class="col-lg-6">
            {% render_field form.location class='form-control' data-size='10' %}
        </div>
        <div class="col-lg-2">
            <button class="btn btn-default" type="button" data-toggle="modal" data-target="#map_modal">Map</button>
        </div>
    </div>
</form>

如何获取地图按钮与选择下拉列表排列？

How can I get the Map button to line up with the select dropdown?

推荐答案

我只是想出来。问题是，我有一些通用代码，在选择文本框上方输出可能的形式错误的无序列表。问题是，如果没有错误，仍然会生成创建无序列表的代码，但列表将为空。这将抛弃间距。

I just figured it out. The problem was that I had some generic code that output an unordered list of possible form errors above the select textbox. The problem was that if there were no errors, the code to create the unordered list would still be generated, but the list would be empty. This would throw off spacing.

请参见此代码一个具体的例子。

See this code for a concrete example.

所有我需要做的是首先检查是否有错误，然后创建无序列表。现在，无序列表将不会出现，除非有错误。

All I had to do was first check to see if there are errors before creating that unordered list. So now, the unordered list won't appear unless there are errors.

感谢大家的帮助！

这篇关于当使用Bootstrap的形式 - 水平时，如何对齐表单元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！