Inline Bootstrap form layout with labels above inputs

后端未结

关注

 6  1058

没有蜡笔的小新

I\'d like to create a form with the following layout using Bootstrap 3:

$\"enter$

相关标签:

6条回答

心在旅途

2021-02-03 19:39

Replace <label> tag with <div> and it will line up on top perfectly.

0 讨论(0)
发布评论:

提交评论
- 加载中...

轻奢々

2021-02-03 19:39

this will work:

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

check:https://jsfiddle.net/89h0vrLq/

0 讨论(0)

天涯浪人

2021-02-03 19:42

For bootstrap v4 you can use 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>

0 讨论(0)

挽巷

2021-02-03 19:44

I think the simplest solution would be to add col-xs-4 to the class of each div. That will make sure the divs will be inline for the jsfiddle example. Additionally, you should close the form tag with </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>

0 讨论(0)

野趣味

2021-02-03 19:49
Putting <div style="clear: both;"></div> between the <label> and the <input> worked for me. I tried a bunch of the above ideas with no luck. This is with Bootstrap 3.3.7.

So
```
<label for="name" class="control-label">Line Height</label> 
<div style="clear: both;"></div>
<input type="number" value='' class="form-control" id="lineHeight">
```
I also included "pull-right" as a class (i.e. class="control-label pull-right" and class="form-control pull-right" to get the label and the input on the right-hand side of the page.
0 讨论(0)
发布评论:

提交评论
- 加载中...

说谎

2021-02-03 19:57

With Bootstrap 4.4:

Use the class "form-row" in the form element.

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

0 讨论(0)