Html 带有标签的 Twitter Bootstrap 3 内联表单

Question

提问by VSP

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)

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

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.

最后，当它跳到下一行时，是否有一种方法可以在 Label + Field 之间有更多的垂直边距。

Answer 1

回答by zessx

Option #1 : fixed columns

选项#1：固定列

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

您可以使用混合结构col-xs-12，col-sm-6并col-lg-3获得 1、2 或 4 列。在您的中form-group，请记住使用col-xs-4和修复标签/输入大小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 :

你仍然需要一些 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.

您可以根据需要添加任意数量的输入。

enter image description here

在此处输入图片说明

Bootply

引导

Option #2 : fluid columns

选项#2：流体柱

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 :

还有一些 CSS 行来修复边距：

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

enter image description here

在此处输入图片说明

Bootply

引导

Answer 2

回答by Mark Meyerovich

The same as option #1 from @zessx, but without overriding CSS. This one also aligns labels to the right to increase space between label-control pairs. Class "media" is there to add top margin without creating a custom class, but in general case it is better to have a custom one.

与@zessx 中的选项 #1 相同，但不覆盖 CSS。这也将标签向右对齐以增加标签-控件对之间的空间。“媒体”类可以在不创建自定义类的情况下添加上边距，但在一般情况下，最好有一个自定义类。

<div class="form-horizontal">
    <legend>Form legend</legend>
    <div class="media col-xs-12 col-sm-6 col-lg-3">
        <label for="InputFieldA" class="control-label text-right col-xs-4">Field A</label>
        <div class="input-group col-xs-8">
            <input type="text" class="form-control" id="InputFieldA" placeholder="InputFieldA">
        </div>
    </div>
    <div class="media col-xs-12 col-sm-6 col-lg-3">
        <label for="InputFieldB" class="control-label text-right col-xs-4">Field B</label>
        <div class="input-group col-xs-8">
            <input type="text" class="form-control" id="InputFieldB" placeholder="InputFieldB">
        </div>
    </div>
    <div class="media col-xs-12 col-sm-6 col-lg-3">
        <label for="InputFieldC" class="control-label text-right col-xs-4">Field C</label>
        <div class="input-group col-xs-8">
            <input type="text" class="form-control" id="InputFieldC" placeholder="InputFieldC">
        </div>
    </div>
    <div class="media 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>
</div>

Bootply

引导

Answer 3

回答by Talha

The simplest way is to put both label and text input in cols div. Hope this will save time for all others :)

最简单的方法是将标签和文本输入都放在 cols div 中。希望这将为所有其他人节省时间:)

<div class="col-md-3 text-right">
   <label>City</label>
</div>
<div class="col-md-3 text-right">
     <asp:TextBox data-toggle="tooltip" pbpo-validation-type="required" title="City" runat="server" ID="textbox_city" CssClass="form-control input-sm" ClientIDMode="Static" placeholder=""></asp:TextBox>
</div>

Answer 4

回答by bukka

Alright I played with the grid system and this is as close as I could get to your setup.

好吧，我使用了网格系统，这与您的设置非常接近。

<div class="container">
    <form role="form" class="form-horizontal">
        <div class="form-group col-sm-5">
            <label for="inputPassword" class="col-xs-4 control-label">Email</label>
            <div class="col-xs-8">
                <input type="password" class="form-control" id="inputPassword" placeholder="Password" />
            </div>
        </div>
        <div class="form-group col-sm-5">
            <label for="inputPassword" class="col-xs-4 control-label">Password</label>
            <div class="col-xs-8">
                <input type="password" class="form-control" id="inputPassword" placeholder="Password" />
            </div>
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
    </form>
</div>

This has two fields only. You might want to change the colclasses to fit your layout.

这只有两个字段。您可能希望更改col类以适合您的布局。

jsFiddle

js小提琴

Answer 5

回答by scooterlord

I would propose something completely different, wrap the labels and fields inside inline divs:

我会提出一些完全不同的建议，将标签和字段包装在内联 div 中：

<div style="display:inline-block"> 
  Label:input
</div>

This way, when they are about to break, they break in pairs, labels+inputs.

这样，当它们即将断开时，它们成对断开，标签+输入。

Answer 6

回答by Abhineet

You can try below

你可以试试下面

Working here- http://www.bootply.com/117807

在这里工作 - http://www.bootply.com/117807

<div class="container">
<div class="row">
  <div class="col-md-4">
  <div class="row">
    <div class="col-md-4 col-xs-3 col-sm-4"><label>First Name</label></div>
    <div class="col-md-8 col-xs-9 col-sm-8"><input type="text"></div>
  </div>
  </div>
  <div class="col-md-4">
  <div class="row">
    <div class="col-md-4 col-xs-3 col-sm-4"><label>Last Name</label></div>
    <div class="col-md-8 col-xs-9 col-sm-8"><input type="text"></div>
    </div>
  </div>
  <div class="col-md-4">
  <div class="row">
    <div class="col-md-4 col-xs-3 col-sm-4"><label>Contact</label></div>
    <div class="col-md-8 col-xs-9 col-sm-8"><input type="text"></div>
    </div>
  </div>

  </div>
</div>

Html 带有标签的 Twitter Bootstrap 3 内联表单

提问by VSP

回答by zessx

Option #1 : fixed columns

选项#1：固定列

Option #2 : fluid columns

选项#2：流体柱

回答by Mark Meyerovich

回答by Talha

回答by bukka

回答by scooterlord

回答by Abhineet

相关推荐

最近更新

标签

Html 带有标签的 Twitter Bootstrap 3 内联表单

提问by VSP

回答by zessx

Option #1 : fixed columns

选项#1：固定列

Option #2 : fluid columns

选项#2：流体柱

回答by Mark Meyerovich

回答by Talha

回答by bukka

回答by scooterlord

回答by Abhineet

相关推荐

Html 在 MVC razor 中显示模型的列表

Html 如何将模板插入另一个模板？

Html 按钮和链接的字体大小

Html Bootstrap 3 - 显示所有屏幕尺寸的折叠导航

相关推荐

最近更新

标签