输入上方带有标签的内联 Bootstrap 表单布局答案

【问题标题】：Inline Bootstrap form layout with labels above inputs输入上方带有标签的内联 Bootstrap 表单布局
【发布时间】：2014-08-19 17:35:51
【问题描述】：

我想使用 Bootstrap 3 创建一个具有以下布局的表单：

我在这里尝试了一个 jsfiddle：http://jsfiddle.net/quyB6/

以及我尝试过的标记：

<form>
    <div class="form-group col-md-4">
        <label for="name" class="control-label">Line Height</label>
        <input type="number" value='' class="form-control" id="lineHeight">
    </div>
    <div class="form-group col-md-4">
        <label for="name" class="control-label">Padding Top</label>
        <input type="number" value='' class="form-control" id="paddingTop" />
    </div>
    <div class="form-group col-md-4">
        <label for="name" class="control-label">Padding Bottom</label>
        <input type="number" value='' class="form-control" id="paddingBottom">
    </div>
</div>

【问题讨论】：

标签： html css twitter-bootstrap-3

【解决方案1】：

这将起作用：

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Bootstrap 4 Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<body>
    <div class="container">
        <form>
            <div class="row">
                <div class="col-md-4">
                    <label for="name" class="control-label">Line Height</label>
                </div>
                <div class="col-md-4">
                    <label for="name" class="control-label">Padding Top</label>
                </div>
                <div class="col-md-4">
                    <label for="name" class="control-label">Padding Bottom</label>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <input type="number" value='' class="form-control  bg-secondary text-white" id="lineHeight">
                </div>

                <div class="col-md-4">
                    <input type="number" value='' class="form-control  bg-secondary text-white" id="paddingTop" />
                </div>
                <div class="col-md-4">
                    <input type="number" value='' class="form-control  bg-secondary text-white" id="paddingBottom">
                </div>
            </div>
    </div>

</body>

</html>

检查：https://jsfiddle.net/89h0vrLq/

【讨论】：

【解决方案2】：

使用 Bootstrap 4.4：

在表单元素中使用“form-row”类。

<form class="form-row">
    <div class="form-group col-md-4">
        <label for="name" class="control-label">Line Height</label>
        <input type="number" value='' class="form-control" id="lineHeight">
    </div>
    <div class="form-group col-md-4">
        <label for="name" class="control-label">Padding Top</label>
        <input type="number" value='' class="form-control" id="paddingTop" />
    </div>
    <div class="form-group col-md-4">
        <label for="name" class="control-label">Padding Bottom</label>
        <input type="number" value='' class="form-control" id="paddingBottom">
    </div>
</form>

【讨论】：

这应该被投票更高。与其他答案相比，“form-row”（使用 flex）给出了更一致的结果。

【解决方案3】：

将<div style="clear: both;"></div> 放在<label> 和<input> 之间对我有用。我尝试了一堆上述想法，但没有运气。这是 Bootstrap 3.3.7。

所以

<label for="name" class="control-label">Line Height</label> 
<div style="clear: both;"></div>
<input type="number" value='' class="form-control" id="lineHeight">

我还将"pull-right" 包含在一个类中（即class="control-label pull-right" 和class="form-control pull-right" 以获取页面右侧的标签和输入。

【讨论】：

【解决方案4】：

将<label>标签替换为<div>，它将完美地排列在顶部。

【讨论】：

不幸的是，自 v4-alpha.6 以来，这不再有效。 :(

【解决方案5】：

对于 bootstrap v4，您可以使用 d-flex flex-column:

<div class="form-group col-md-4">
    <div class="d-flex flex-column">
        <label for="name" class="control-label">Line Height</label>
        <input type="number" value='' class="form-control" id="lineHeight">
    </div>
</div>

【讨论】：

谢谢！如果您想将其与输入字段顶部的标签一起使用，请不要让您的表单不具有内联类表单
如果没有 form-inline 类，我的输入会在我激活它们时跳来跳去

【解决方案6】：

我认为最简单的解决方案是将col-xs-4 添加到每个 div 的类中。这将确保 div 在 jsfiddle 示例中是内联的。此外，您应该使用</form> 关闭表单标签。

<form>
    <div class="form-group col-xs-4 col-md-4">
        <label for="name" class="control-label">Line Height</label>
        <input type="email" value='' class="form-control" id="name" placeholder="Ime">
    </div>
    <div class="form-group col-xs-4 col-md-4">
        <label for="name" class="control-label">Padding Top</label>
        <input type="email" value='' class="form-control" id="name" placeholder="Ime">
    </div>
    <div class="form-group col-xs-4 col-md-4">
        <label for="name" class="control-label">Padding Bottom</label>
        <input type="email" value='' class="form-control" id="name" placeholder="Ime">
    </div>
</form>

【讨论】：

顺便说一句，这是如何工作的？文档说添加类 col-xs- 会影响超小设备（getbootstrap.com/css/#grid-media-queries。
我最好的猜测是 JSFiddle 示例中的视口（HTML 部分）属于
所以这就是为什么这些都是我继承的代码......