Question

我想使用带有输入文本字段上方标签的bootstrap创建内联表单，但结果看起来很混乱。
这就是我的尝试：

<form id="form" method="post" class="form-inline" >
   <div class="row">
     <div class="col-md-2">               
        <label for="from">from:</label>
        <input type="text" class="form-control form-text" />
     </div>
     <div class="col-md-2">
        <label for="to">to:</label>
        <input type="text" class="form-control form-text"/>
     </div>
     <div class="input-group date col-md-2" id="datepicker">
        <label for="checkin">check in</label>
        <input type="text" class="form-control datepicker" name="processdate" />
        <span class="input-group-addon btn"><i class="glyphicon glyphicon-calendar"></i> </span>
     </div>
     <div class="input-group date col-md-2" id="datepicker">
        <label for="checkout">check out</label>
        <input type="text" class="form-control datepicker" name="processdate" />
        <span class="input-group-addon btn"><i class="glyphicon glyphicon-calendar"></i> </span>
     </div>
     <div class="col-md-2">
        <input type="submit" class="btn btn-default" value="submit"/>
     </div>
   </div>
 </form>

这就是我得到的：
result
如何将提交按钮设置到正确位置，并且字形高度与输入字段相同，我做错了什么？

Answer 1

你可以在你的标签周围放置带引导类的div并控制如下：

     <div class="col-md-2">     
        <div class="row">     
            <div class="col-md-6">          
                 <label for="from">from:</label>
            </div>
            <div class ="col-md-6">
                <input type="text" class="form-control form-text" />
            </div>
       </div>
    </div>

行div可能就足够了：它将元素放在一行中我想在控件周围添加额外的引导类，以便我可以修改它们。例如，标签的宽度小于控件本身的宽度。

Answer 2

我对你的html进行了一些修改：https://jsfiddle.net/05t4s041/

<form id="form" method="post" class="form-inline" >
  <div class="row">
    <div class="col-md-2">               
      <label for="from">from:</label>
      <input type="text" class="form-control form-text" />
    </div>
    <div class="col-md-2">
      <label for="to">to:</label>
      <input type="text" class="form-control form-text"/>
    </div>
    <div class="col-md-2">
      <label for="checkin">check in</label>
      <div class="input-group date" id="datepicker">
        <input type="text" class="form-control datepicker" name="processdate" />
        <span class="input-group-addon btn"><i class="glyphicon glyphicon-calendar"></i> </span>
      </div>
    </div>
    <div class="col-md-2">
      <label for="checkout">check out</label>
      <div class="input-group date" id="datepicker">
        <input type="text" class="form-control datepicker" name="processdate" />
        <span class="input-group-addon btn"><i class="glyphicon glyphicon-calendar"></i> </span>
      </div>
    </div>
    <div class="col-md-2">
      <input type="submit" class="btn btn-default" value="submit"/>
    </div>
  </div>
</form>

带有输入

2 个答案: