Twitter Bootstrap 3带标签的内联表单 [英] Twitter Bootstrap 3 Inline Form with labels

问题描述

在搜索后，我无法看到我如何设计一个具有以下设计的内联表单：（如果可能，使用引导3类而不是css自定义）

当用户具有宽屏幕时：

 表单 -  Legend 
 
 LabelFieldA：InputFieldA LabelFieldB：InputFieldB LabelFieldC ：InputFieldC<提交按钮> 
  

当用户具有较小的屏幕时：

  Form-Legend 
 
 LabelFieldA：InputFieldA LabelFieldB：InputFieldB 
 
 LabelFieldC：InputFieldC< Submit Button> 
  

这个想法是设计最初将所有字段放在一行，将跳到下一行，但是将Label + Field保持在一起。

此外，如果有一种方式，每个Label + Input之间的间距大于标签和它的字段。

最后，如果有一种方法，当标签+字段跳到下一行时，有更多的垂直边距。

解决方案

选项＃1：固定列

c $ c> col-xs-12 ， col-sm-6 和 col-lg-3 以获得1,2或4列。在表单组中，请记住使用 col-xs-4 和<$ c $修复标签/ c> col-xs-8 ：

 < div class =container 
< form class =form form-inlinerole =form> 
 
< legend>表单图例< / legend> 
 
< div class =form-group col-xs-12 col-sm-6 col-lg-3> 
< label for =InputFieldAclass =col-xs-4>字段A< / label> 
< div class =col-xs-8> 
< input type =textclass =form-controlid =InputFieldAplaceholder =InputFieldA> 
< / div> 
< / div> 
 
< div class =form-group col-xs-12 col-sm-6 col-lg-3> 
< label for =InputFieldBclass =col-xs-4>字段B< / label> 
< div class =col-xs-8> 
< input type =textclass =form-controlid =InputFieldBplaceholder =InputFieldB> 
< / div> 
< / div> 
 
< div class =form-group col-xs-12 col-sm-6 col-lg-3> 
< label for =InputFieldCclass =col-xs-4>字段C< / label> 
< div class =col-xs-8> 
< input type =textclass =form-controlid =InputFieldCplaceholder =InputFieldC> 
< / div> 
< / div> 
 
< div class =form-group col-xs-12 col-sm-6 col-lg-3> 
< button type =submitclass =btn btn-default col-xs-8 col-xs-offset-4>提交按钮< / button> 
< / div> 
 
< / form> 
< / div> 
  

您仍然需要几个CSS：

  //获取更大的输入，并与提交按钮对齐
 .form-inline .form-group> div.col-xs-8 {
 padding-left：0; 
 padding-right：0; 
} 
 //垂直对齐标签
 .form-inline label {
 line-height：34px; 
} 
 //强制内联控件以适应容器宽度
 // http://getbootstrap.com/css/#forms-inline 
 .form-inline .form-control {
 width：100％; 
} 
 //为我们的多行格式复位margin-bottom 
 @media（min-width：768px）{
 .form-inline .form-group {
 margin-bottom：15px; 
} 
} 
  

您可以添加任意数量的输入。 / p>

After searching everywhere i couldnt see exactly how i can design an inline form that has the following design: (using bootstrap 3 classes instead of css customizations when possible)

When the user has a wide screen:

 Form-Legend

     LabelFieldA: InputFieldA   LabelFieldB: InputFieldB   LabelFieldC: InputFieldC   <Submit Button>

When the user has a smaller screen:

Form-Legend

    LabelFieldA: InputFieldA   LabelFieldB: InputFieldB   

    LabelFieldC: InputFieldC   <Submit Button>

The idea is that the design initially puts all the fields in one line and if it doesnt fit the controls would jump to the next line, but maintaining the Label + Field together.

Also if there is a way so the spacing between each Label + Input is greater than the spacing between the Label and its Field.

And lastly if there is a way of having more vertical margin between the Label + Field when it jumps to the next line.

解决方案

Option #1 : fixed columns

You can use a structure mixing col-xs-12, col-sm-6 and col-lg-3 to get 1, 2 or 4 columns. Inside your form-group, remember to fix label/input sizes with col-xs-4 and col-xs-8 :

<div class="container">
  <form class="form form-inline" role="form">

    <legend>Form legend</legend>

    <div class="form-group col-xs-12 col-sm-6 col-lg-3">
      <label for="InputFieldA" class="col-xs-4">Field A</label>
      <div class="col-xs-8">
        <input type="text" class="form-control" id="InputFieldA" placeholder="InputFieldA">
      </div>
    </div>

    <div class="form-group col-xs-12 col-sm-6 col-lg-3">
      <label for="InputFieldB" class="col-xs-4">Field B</label>
      <div class="col-xs-8">
        <input type="text" class="form-control" id="InputFieldB" placeholder="InputFieldB">
      </div>
    </div>

    <div class="form-group col-xs-12 col-sm-6 col-lg-3">
      <label for="InputFieldC" class="col-xs-4">Field C</label>
      <div class="col-xs-8">
        <input type="text" class="form-control" id="InputFieldC" placeholder="InputFieldC">
      </div>
    </div>

    <div class="form-group col-xs-12 col-sm-6 col-lg-3">
    <button type="submit" class="btn btn-default col-xs-8 col-xs-offset-4">Submit Button</button>
    </div>

  </form>
</div>

You still need a few CSS :

// get a larger input, and align it with submit button
.form-inline .form-group > div.col-xs-8 {
    padding-left: 0;
    padding-right: 0;
}
// vertical align label
.form-inline label {
    line-height: 34px;
}
// force inline control to fit container width
// http://getbootstrap.com/css/#forms-inline
.form-inline .form-control {
    width: 100%;
}
// Reset margin-bottom for our multiline form
@media (min-width: 768px) {
  .form-inline .form-group {
    margin-bottom: 15px;
  }
}

You can add as many inputs as you want.

Bootply

Option #2 : fluid columns

To be able to not care of the number of fields per row, you can use this structure :

<div class="container">
  <form class="form form-inline form-multiline" role="form">

    <legend>Form legend</legend>

    <div class="form-group">
      <label for="InputFieldA">Field A</label>
      <input type="text" class="form-control" id="InputFieldA" placeholder="InputFieldA">
    </div>

    <div class="form-group">
      <label for="InputFieldB">Very Long Label For Field B</label>
      <input type="text" class="form-control" id="InputFieldB" placeholder="InputFieldB">
    </div>

    <div class="form-group">
      <label for="InputFieldC">F. C</label>
      <input type="text" class="form-control" id="InputFieldC" placeholder="InputFieldC">
    </div>

    <div class="form-group">
      <label for="InputFieldD">Very Long Label For Field D</label>
      <input type="text" class="form-control" id="InputFieldD" placeholder="InputFieldD">
    </div>

    <div class="form-group">
      <label for="InputFieldE">Very Long Label For Field E</label>
      <input type="text" class="form-control" id="InputFieldE" placeholder="InputFieldE">
    </div>

    <div class="form-group">
      <label for="InputFieldF">Field F</label>
      <input type="text" class="form-control" id="InputFieldF" placeholder="InputFieldF">
    </div>

    <div class="form-group">
      <button type="submit" class="btn btn-default">Submit Button</button>
    </div>

  </form>
</div>

And a few CSS lines to fix margins :

.form-multiline .form-group {
    margin-bottom: 15px;
    margin-right: 30px;
}
.form-multiline label,
.form-multiline .form-control {
    margin-right: 15px;
}

Bootply

这篇关于Twitter Bootstrap 3带标签的内联表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！