Html Bootstrap3：如何在一行上获得两个表单输入，在单独的行上获得其他输入？

我正在尝试使用Bootstrap 3.1.1格式化我的注册页面。我希望前两个输入在同一条线上，而其他输入在自己的线上。我曾经尝试过引导类“行”、“表单内联”和“表单水平”但都没用

有人知道怎么做吗

这是你的电话号码

.reg_名称{
最大宽度：200px；
}

使用

和

---

这里有一个小提琴：

您可以将输入包装在

col-*

类中

<form name="registration_form" id="registration_form" class="form-horizontal">
     <div class="form-group">
           <div class="col-sm-6">
             <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="col-sm-6">
             <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><!--/form-group-->

    <div class="form-group">
        <div class="col-sm-12">
          <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><!--/form-group-->

    <div class="form-group">
        <div class="col-sm-12">
        <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>
    </div><!--/form-group-->
 </form>

---

您可以像一个div中的两个输入框一样进行编码

<div class="input-group">
            <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
            <input style="width:50% " class="form-control " placeholder="first name"  name="firstname" type="text" />
            <input style="width:50% " class="form-control " placeholder="lastname"  name="lastname" type="text" />
        </div>

---

我使用内联块为输入创建了两种样式的级联，几乎覆盖了字段：

.input-sm {
    height: 2.1em;
    display: inline-block;
}

和一系列固定尺寸，而不是%

.input-10 {
    width: 10em;
}

.input-32 {
    width: 32em;
}

---

我喜欢这个解决方案，但我需要的名字和姓氏是

col-lg-6

和

col-xs-12

。当它转到

xs、sm、md

时，顶部和底部都没有边距，看起来都不稳定。有什么想法吗？将所有内容包装在

col-*

中而不使用带有class

row

的父元素将导致元素具有

左填充

和

右填充

@Barrosy是的，对于较新的Bootstrap 4.x来说是这样，但是当Bootstrap 3.x回答这个问题时，

.form horizontal.form group

与

.row

一样具有负边距，因此当时不需要

.row

。请记住，在col-xs-n中不要将宽度（n）设置得太大，否则字段将无论如何换行。MVC编辑模板附带的默认值是

col-md-10

，无论我做了什么，字段都不会保持在同一行，直到我减小了大小。F12 CSS浏览器帮助我解决问题这是最适合我的答案。它允许文本框相互挤压，而不是像其他答案一样在引导网格上隔开

.input-10 {
    width: 10em;
}

.input-32 {
    width: 32em;
}