引导3：如何在一行上获得两个表单输入，在单个行上获得其他输入？ [英] Bootstrap 3: How to get two form inputs on one line and other inputs on individual lines?

问题描述

我尝试使用Bootstrap 3.1.1格式化我的注册页面。我希望前两个输入在同一行，而其他输入是一个有自己的线。我已经玩过bootstrap类row，form-inline和form-horizo​​ntal无效。

I trying to format my registration page with Bootstrap 3.1.1. I would like the first two inputs to be on the same line while the other inputs are one there own line. I have played around with the bootstrap classes "row", "form-inline", and "form-horizontal" to no avail.

有人知道如何做？

这里是小提琴

<style>
.reg_name {
 max-width:200px;
}
</style>


<form name="registration_form" id='registration_form' class="form-inline">

        <div class="form-group">
            <label for="firstname" class="sr-only"></label>
            <input id="firstname" class="form-control input-group-lg reg_name" type="text" name="firstname"
                   title="Enter first name"
                   placeholder="First name"/>
        </div>

        <div class="form-group">
            <label for="lastname" class="sr-only"></label>
            <input id="lastname" class="form-control input-group-lg reg_name" type="text" name="lastname"
                   title="Enter last name"
                   placeholder="Last name"/>
        </div>

    <div class="form-group">
        <label for="username" class="sr-only"></label>
        <input id="username" class="form-control input-group-lg" type="text" autocapitalize='off' name="username"
               title="Enter username"
               placeholder="Username"/>
    </div>

    <div class="form-group">
        <label for="password" class="sr-only"></label>
        <input id="password" class="form-control input-group-lg" type="password" name="password"
               title="Enter password"
               placeholder="Password"/>
    </div>

 </form>

推荐答案

使用< div class =row> 和< div class =form-group col-xs-6>

这里是小提琴： http://jsfiddle.net/core972/SMkZV/2/

这篇关于引导3：如何在一行上获得两个表单输入，在单个行上获得其他输入？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！