内联表单 MVC答案

【问题标题】：Inline form MVC内联表单 MVC
【发布时间】：2017-01-12 13:04:08
【问题描述】：

我正在使用 MVC 的引导模板创建内联表单，但是当我使用以下代码创建内联表单时：

<form class="form-inline">
        <div class="form-group">
            <label for="exampleInputName2">Name</label>
            <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
        </div>
        <div class="form-group">
            <label for="exampleInputEmail2">Email</label>
            <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
        </div>
        <button type="submit" class="btn btn-default">Send invitation</button>
    </form>

这是结果：

如何实现内联表单？

【问题讨论】：

这是因为标签。定义一些自定义 CSS 来向下移动按钮。
同样只有一个标签和一个输入，输入总是在另一行，你能举个例子吗？
我相信您还有一些其他样式可以覆盖标签。 getbootstrap.com/css/#forms-inline
我用的是Bootstrap v3.0.0，没做任何改动，就这样，不能是MVC的限制吗？
可以升级到最新版本（v3.3.7）吗？最新版本的内联表单正是您所需要的

标签： html css asp.net-mvc forms twitter-bootstrap

【解决方案1】：

在表单组中添加您的按钮

<div class="form-group">
     <button type="submit" class="btn btn-default">Send invitation</button>
 </div>

【讨论】：

【解决方案2】：

<form class="form-inline">
    <div class="col-lg-4" id="userFormColumn1">
        <div class="form-group">
            <label for="exampleInputName2">Name</label>
            <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
        </div>
    </div>
    <div class="col-lg-4" id="userFormColumn1">
        <div class="form-group">
            <label for="exampleInputEmail2">Email</label>
            <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
        </div>
    </div>
    <div class="col-lg-4" id="userFormColumn1">
        <div class="form-group">
            <button type="submit" class="btn btn-default">Send invitation</button>
        </div>
    </div>
</form>

试试这个。

【讨论】：