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

您还需要指定设备，因为 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>