Question

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

enter image description here

我在这里尝试了一个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>

Answer 1

我认为最简单的解决方案是将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>

Answer 2

将<label>标记替换为<div>，它将完美地排在最前面。

Answer 3

对于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>

Answer 4

将<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"）作为标签，并在页面的右侧进行了输入。

Answer 5

使用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>

Answer 6

这将起作用：

<!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/

Answer 7

 <PropertyGroup>
     //....
    <LangVersion>8.0</LangVersion>    
    <Nullable>enable</Nullable> <!-- to support nullable reference type -->
  </PropertyGroup>

<ItemGroup>   
    <PackageReference Include="Microsoft.Net.Compilers.Toolset" Version="3.3.1" PrivateAssets="All" />
  </ItemGroup>

内联Bootstrap表单布局，上面有标签输入

7 个答案: