Question

我正在使用Twitter Bootstrap 3.3.6。我是新手。我设计了一个包含以下输入字段的表单。

  <div class="form-group row">  
    <label for="address1" class="col-xs-2 col-md-1 control-label">Address 1:</label>
    <div class="col-xs-10 col-md-4">
      <input type="text" name="address1" id="" class="form-control" maxlength="55" value="" />
    </div>
    <label for="address2" class="col-xs-2 col-md-1 control-label">Address 2:</label>
    <div class="col-xs-10 col-md-4">
      <input type="text" name="address2" id="" class="form-control" maxlength="55" value="" />
    </div>
  </div>

当我使用Firefox响应式设计模式检查宽度小于768时，第二个标签“地址2：”被包裹到一个新行，但它在左边显示一些边距。当我使用萤火虫检查检查时，我没有看到任何问题。

编辑：实际上我想在大屏幕的同一行上面有2个标签和输入，但对于768px以下的屏幕则要分为2行。

Answer 1

您不需要将该输入放在另一个div中。只需在标签标签后输入您的输入，并为两个输入使用两个不同的.form-groups。你的代码应该是这样的。

<div class="form-group">  
    <label for="address1" class="col-xs-2 col-md-1 control-label">Address 1:</label>
    <input type="text" name="address1" id="" class="form-control" maxlength="55" value="" />
</div>


<div class="form-group">  
    <label for="address1" class="col-xs-2 col-md-1 control-label">Address 1:</label>
    <input type="text" name="address1" id="" class="form-control" maxlength="55" value="" />
</div>

如果您需要制作内联表单，请将form-inline类添加到<form>元素中。

<form class="form-inline">

最诚挚的问候！

Answer 2

我添加了col-xs-12做标签以及＆＃39;文本中心＆＃39;为了更好地定位小班，但这取决于你。

<div class="form-group row">  
  <label for="address1" class="col-xs-12 col-md-1 control-label text-center">Address 1:</label>
  <div class="col-xs-10 col-md-4">
    <input type="text" name="address1" id="" class="form-control" maxlength="55" value="" />
  </div>
  <label for="address2" class="col-xs-12 col-md-1 control-label text-center">Address 2:</label>
    <div class="col-xs-10 col-md-4">
      <input type="text" name="address2" id="" class="form-control" maxlength="55" value="" />
   </div>
</div>

bootstrap 3.3.6小屏幕上的响应形式

2 个答案: