Question

我使用以下代码创建了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表单标签时，表单会发生变化。每个输入都在一行上。所以我有一行用于关键字输入，一行用于输入国家，一行用于提交按钮。我的表格现在是垂直的。这里是春天的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>

Answer 1

尝试在你使用的每个div中放置style =“display：inline”

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

Answer 2

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

如何在同一行创建两条输入线的表单？

2 个答案: