Bootstrap 3：如何在一行上获得两个表单输入，在各行上获得其他输入？答案

【问题标题】：Bootstrap 3: How to get two form inputs on one line and other inputs on individual lines?Bootstrap 3：如何在一行上获得两个表单输入，在各行上获得其他输入？
【发布时间】：2014-05-18 06:32:08
【问题描述】：

我尝试使用 Bootstrap 3.1.1 格式化我的注册页面。我希望前两个输入在同一行，而其他输入在同一行。我玩过引导类“row”、“form-inline”和“form-horizontal”，但无济于事。

有人知道怎么做吗？

这里是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>

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

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

这里有一个小提琴：https://jsfiddle.net/core972/SMkZV/2/

【讨论】：

记住不要在 col-xs-n 中使宽度 (n) 太大，否则字段将自动换行到下一行。 MVC 编辑模板附带的默认值是col-md-10，无论我做什么，在我减小大小之前，该字段都不会保持在同一行。 F12 CSS 浏览器帮我排错

【解决方案2】：

我使用 inline-block 为几乎覆盖该字段的输入创建了 2 个样式级联：

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

和一系列固定大小，而不是%

.input-10 {
    width: 10em;
}

.input-32 {
    width: 32em;
}

【讨论】：

【解决方案3】：

您可以在一个 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>

【讨论】：

这对我来说是最合适的答案。它允许文本框相互挤压，而不是像其他答案那样在引导网格上隔开

【解决方案4】：

您可以将输入包装在 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>

http://bootply.com/127825

【讨论】：

我喜欢这个解决方案，但我说我需要名字和姓氏为 col-lg-6 和 col-xs-12。当它转到xs, sm, md 时，顶部和底部没有边距，看起来很不稳定。有什么想法吗？
将所有内容包装在col-* 中而不使用类row 的父元素将导致该元素具有padding-left 和padding-right。
@Barrosy 是的，对于较新的 Bootstrap 4.x 来说确实如此，但是当这个问题回答 Bootstrap 3.x 时，.form-horizontal .form-group与.row 一样具有负边距，因此当时不需要.row。