加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 资源网站 > 资源 > 正文

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

发布时间:2020-12-14 21:38:25 所属栏目:资源 来源:网络整理
导读:我尝试使用Bootstrap 3.1.1格式化我的注册页面。我希望前两个输入在同一行,而其他输入是一个有自己的行。我已经用自举类“行”,“形式内联”和“形式 – 横向”玩了无效。 有谁知道该怎么办? 这是Fiddle style.reg_name { max-width:200px;}/styleform na
我尝试使用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/

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读