html – 引导3:如何在单行和其他输入上单独输入两个表单输入?

前端之家收集整理的这篇文章主要介绍了html – 引导3:如何在单行和其他输入上单独输入两个表单输入?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我尝试使用Bootstrap 3.1.1格式化我的注册页面。我希望前两个输入在同一行,而其他输入是一个有自己的行。我已经用自举类“行”,“形式内联”和“形式 – 横向”玩了无效。

有谁知道该怎么办?

这是Fiddle

<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/

原文链接:https://www.f2er.com/html/233024.html

猜你在找的HTML相关文章