bootstrap表单字段未扩展到全长

Question

我有一个使用带有表单的bootstrap的网页。对于表单上的字段，我需要做什么才能一直延伸到空白区域的末尾？

   <div class="form-group">
       <label class="control-label col-md-4" for="Name">Name</label>
       <input class="form-control col-md-8" id="Name" name="Name" type="text" />
   </div>

这是目标：

由于

Answer 1

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="control-label col-sm-4" for="Name">Name</label>
    <div class="col-sm-8">
      <input class="form-control" id="Name" name="Name" type="text" />
    </div>
  </div>
</form>

html应如下所示，那么只有输入元素占用宽度的100％并且不会有空格：

<div class="form-group">
   <label class="control-label col-md-4" for="Name">Name</label>
   <div class="col-md-8">
       <input class="form-control" id="Name" name="Name" type="text" />
   </div>
</div>

Refer horizontal form css using twitter bootstrap.

Answer 2

从col-md-*和<label>元素中删除<input>个类。

Answer 3

如果您尝试使用网格视图，则父元素需要具有“行”类。这意味着你保留col-md- * classes.n如果你想使用CSS形式，那么使用你在父级中拥有的东西并删除co​​l-md- *类