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

时间:2014-06-28 22:51:19

标签: html css twitter-bootstrap-3

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

7 个答案:

答案 0 :(得分:37)

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

答案 1 :(得分:9)

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

答案 2 :(得分: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>

答案 3 :(得分:1)

<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 :(得分:1)

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

答案 5 :(得分:0)

这将起作用:

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

答案 6 :(得分:-1)

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