两行 Bootstrap 中的输入对齐

Question

我正在尝试对齐图片上的表格：

这是我目前的代码：

<div class="col-md-6 myForm">               
<form role="form" id="assureForm">
<div class="form-group">
<input type="text" name="firstname" class="form-control firstname" placeholder="First Name" required />
</div>
<div class="form-group">
<input type="text" name="lastname" class="form-control lastname" placeholder="Last Name" required />
</div>
<div class="form-group">
<input type="email" name="email" class="form-control email" placeholder="Email" required="required" />
</div>
<div class="form-group">
<input type="text" name="company" class="form-control company"placeholder="Company" />
</div>
</form>

这显然不是我想要的，因为它们都排成一行。如何将它们排成两行？

Answer 1

试试下面的代码

   <div class="col-sm-6 myForm">
        <form role="form" id="assureForm">
            <div class="row">
                <div class="col-sm-6 form-group">
                    <input type="text" name="firstname" class="form-control firstname" placeholder="First Name" required />
                </div>
                <div class="col-sm-6 form-group">
                    <input type="text" name="lastname" class="form-control lastname" placeholder="Last Name" required />
                </div>

            </div>

            <div class="row">
                <div class="col-sm-6 form-group">
                    <input type="email" name="email" class="form-control email" placeholder="Email" required="required" />
                </div>
                <div class="col-sm-6 form-group">
                    <input type="text" name="company" class="form-control company" placeholder="Company" />
                </div>

            </div>
        </form>
    </div>

Answer 2

您缺少 <div class="row"> 标签

http://jsbin.com/qinokaniho/1/edit?html,console,output

Answer 3

我已经解决了，以防万一有人需要：

<div class="col-md-12 myForm">               
<form role="form" id="assureForm">
<div class="col-md-6">
<div class="form-group">
<input type="text" name="firstname" class="form-control firstname" placeholder="First Name" required />
</div>
<div class="form-group">
<input type="text" name="lastname" class="form-control lastname" placeholder="Last Name" required />
</div>
<div class="form-group">
<input type="email" name="email" class="form-control email" placeholder="Email" required="required" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="text" name="company" class="form-control company"placeholder="Company" />
</div>
</div>
</form>

Answer 4

尝试这样的事情。

<div class="row">
    <form role="form" id="assureForm">
    <div class="col-md-6 myForm">
      <div class="form-group">
      <input type="text" name="firstname" class="form-control firstname" placeholder="First Name" required />
      </div>
      
      <div class="form-group">
<input type="email" name="email" class="form-control email" placeholder="Email" required="required" />
      </div>
    </div>
    
    <div class="col-md-6 myForm">
      <div class="form-group">
<input type="text" name="lastname" class="form-control lastname" placeholder="Last Name" required />
    </div>
      
      <div class="form-group">
<input type="text" name="company" class="form-control company"placeholder="Company" />
     </div>
      
    </div>
    </form>
  </div>

Answer 5

您还需要指定设备，因为 col-md-6 在中等屏幕尺寸上为 50%，但在移动设备上为 100%

所以使用：Bootstrap网格系统有四个类:

xs（手机）
sm（适用于平板电脑）
md（适用于台式机）
lg（适用于较大的桌面）

试试这个，它工作正常：

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="myForm">
      <form role="form" id="assureForm" class="row">
        <div class="col-md-6 col-xs-6">
          <div class="form-group">
            <input type="text" name="firstname" class="form-control firstname" placeholder="First Name" required />
          </div>
        </div>
        <div class="col-md-6 col-xs-6">
          <div class="form-group">
            <input type="text" name="lastname" class="form-control lastname" placeholder="Last Name" required />
          </div>
        </div>
        <div class="col-md-6 col-xs-6">
          <div class="form-group">
            <input type="email" name="email" class="form-control email" placeholder="Email" required="required" />
          </div>
        </div>
        <div class="col-md-6 col-xs-6">
          <div class="form-group">
            <input type="text" name="company" class="form-control company" placeholder="Company" />
          </div>
        </div>
      </form>

Answer 6

试试这个，我想这应该能帮到你

<div class="col-md-6 myForm">               
<form role="form" id="assureForm">
<div class="row">
<div class="col-sm-6 form-group">
<input type="text" name="firstname" class="form-control firstname" placeholder="First Name" required />
</div>
<div class="col-sm-6 form-group">
<input type="text" name="lastname" class="form-control lastname" placeholder="Last Name" required />
</div>
 

</div>
  <div class="row">
<div class="col-sm-6 ">
<input type="text" name="firstname" class="form-control firstname" placeholder="First Name" required />
</div>
<div class="col-sm-6 form-group">
<input type="text" name="lastname" class="form-control lastname" placeholder="Last Name" required />
</div>
 

</div>
</form>
</div>

两行 Bootstrap 中的输入对齐

Aligment of Inputs in Bootstrap in Two Rows

html

javascript

css

jquery

twitter-bootstrap