Question

我在Bootstrap 3中处理一个项目，我的内联表单有问题。

我在不同的显示器尺寸下进行测试，问题是在非常大的屏幕上。我的输入在行上跳转（输入现在出现在一行中 - 每个输入出现在一行中）。

我的HTML：

<form class="form-inline custom-form" role="form">
  <div class="form-group ">
    <label class="sr-only" for="exampleInputEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
  </div>
  <div class="form-group ">
    <label class="sr-only" for="exampleInputPassword2">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
  </div>

  <button type="submit" class="btn btn-default"><span style="font-family: 'Georgia',sans;">Login</span></button>
</form>

我重复这个问题只是在大屏幕上。任何人都可以帮助我吗？

Answer 1

首先设置列宽类：

<div class="col-sm-12>"<form class="form-inline custom-form" role="form">...</div>

使封闭的标签与网格宽度相加（在本例中为12）：

<div class="form-group col-sm-6"><label>...</label>

以内联形式跳转输入Bootstrap 3

1 个答案: