如何在同一行上创建两个输入行的表单？答案

【问题标题】：How to create form with two input line on the same line?如何在同一行上创建两个输入行的表单？
【发布时间】：2014-03-06 21:56:14
【问题描述】：

我已经使用以下代码创建了 Bootstrap 表单：

    <form class="form-inline" role="form" method="GET" action="/startup/searchprojects">
        <div class="form-group">
            <label class="sr-only" for="keywords">Key words</label> <input
                type="text" class="form-control" id="keywords"
                placeholder="keywords">
        </div>

            <div class="form-group example example-countries">
            <label class="sr-only" for="localisation">Country</label>
                <input class="typeahead" type="text" placeholder="countries">
        </div>

        <button type="submit" class="btn btn-default">
            <fmt:message key="search.button.title" />
        </button>
    </form>

表单显示在同一行。两个输入文本与提交按钮在同一行。

但是当我添加 Spring MVC 表单标签时，表单会发生变化。每个输入都在一行上。所以我有一行用于关键字输入，一行用于输入国家，一行用于提交按钮。我的表格现在是垂直的。这里是spring mvc形式：

<form:form class="form-inline" role="form" method="GET" commandName="search-form" action="/startup/searchprojects">
    <div class="form-group">
        <form:label path="keywords" class="sr-only" for="keywords">Key words</form:label> 
        <form:input path="keywords" type="text" class="form-control" id="keywords"
            placeholder="key words"></form:input>
    </div>

        <div class="form-group example example-countries">
        <form:label path="country" class="sr-only" for="localisation">Country</form:label>
            <form:input path="country" class="typeahead" type="text" placeholder="countries"></form:input>
    </div>

    <button type="submit" class="btn btn-default">
        <fmt:message key="search.button.title" />
    </button>
</form:form>

【问题讨论】：

检查bootstrap docs on inline forms。
我使用文档说明，但是 css bootstrap 被 spring mvc 表单标签更改了
会不会是 example 和 example-countries 类干扰？
Bart 我认为是表单标签造成了干扰，但我真的不知道它是如何发生的。如果我删除弹簧形式标签。表单显示为我想要的
我唯一能想到的是#search-form 上的 CSS 规则，这可能会导致问题，因为 spring 表单标签将为表单生成 id。

标签： html spring-mvc twitter-bootstrap-3

【解决方案1】：

尝试将 style="display: inline" 放在您使用的每个 div 中

<div style="display: inline"> some content</div>

【讨论】：

【解决方案2】：

我调整#search-form 的宽度。是宽度的问题。

【讨论】：