以内联形式对齐标签和文本框 [英] Align Labels and Textboxes in Form-Inline

问题描述

这是我的：

 < div class =container body-content> 
 
< form class =well form-inlinestyle =width：100％;> 
 
< div class =row> 
< div class =form-group col-md-4> 
< label>位置：< / label> 
< input type =textclass =form-control> 
< / div> 
 
 
< div class =form-group col-md-4> 
< label>作业：< / label> 
< input type =textclass =form-control> 
< / div> 
 
< div class =form-group col-md-4> 
< label>事件编号：< / label> 
< input type =textclass =form-control> 
< / div> 
< / div> 
 
< br> 
< br> 
 
< div class =row> 
< div class =form-group col-md-4> 
< label>日期：< / label> 
< input type =textclass =form-control> 
< / div> 
 
< div class =form-group col-md-4> 
< label>培训：< / label> 
< input type =textclass =form-control> 
< / div> 
 
< div class =form-group col-md-4> 
< label>示例：< / label> 
< input type =textclass =form-control> 
< / div> 
< / div> 
 
< / form> 
 
< / div> 
  

运行此操作时，文本框或标签没有结构或对齐方式。我怎么能做到这一点？

这是一个bootply

解决方案

对于每个标签和输入，您应该创建以下结构：

 < div class =form-group col-md-4> 
< label class =col-lg-4 control-label>位置：< / label> 
< div class =col-lg-8> 
< input type =textclass =form-control> 
< / div> 
< / div> 
  

这将使它适用于网格系统

参见bootply

I am using bootstrap's grid system and want to create an inline form.

Here is what I have:

<div class="container body-content">

  <form class="well form-inline" style="width: 100%;">

    <div class="row">
        <div class="form-group col-md-4">
          <label>Location:</label>
          <input type="text" class="form-control">
        </div>


        <div class="form-group col-md-4">
          <label>Assignment:</label>
          <input type="text" class="form-control">
        </div>

        <div class="form-group col-md-4">
          <label>Incident Number:</label>
          <input type="text" class="form-control">
        </div>
    </div>

    <br>
    <br>

    <div class="row">
        <div class="form-group col-md-4">
          <label>Date:</label>
          <input type="text" class="form-control">
        </div>

        <div class="form-group col-md-4">
          <label>Training:</label>
          <input type="text" class="form-control">
        </div>

        <div class="form-group col-md-4">
          <label>Example:</label>
          <input type="text" class="form-control">
        </div>
    </div>

</form>

</div>

When this is ran, there is no structure or alignment for the textboxes or the labels. How can I achieve this?

Here is a bootply

解决方案

For each label and input you should make this structure:

<div class="form-group col-md-4">
     <label class="col-lg-4 control-label">Location:</label>
     <div class="col-lg-8">
          <input type="text" class="form-control">
     </div> 
</div>

this will make it work with the grid system

See bootply

这篇关于以内联形式对齐标签和文本框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！