Question

Sample Layout

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">

            <div class="col-md-4 col-lg-4" style="background-color:aquamarine">

                <div class="form-group">
                    <label class="col-md-4 col-lg-4 control-label" style="background-color:burlywood">Label1:</label>
                    <div class="col-md-8 col-lg-8"><input type="text" class="form-control" /></div>
                </div>


            </div>
            <div class="col-md-4 col-lg-4" style="background-color:aquamarine">

                <div class="form-group">
                    <label class="col-md-4 col-lg-4 control-label" style="background-color:burlywood">Label2:</label>
                    <div class="col-md-8 col-lg-8"><input type="text" class="form-control"/></div>
                </div>
            </div>

            <div class="col-md-4 col-lg-4" style="background-color:aquamarine">
                <div class="form-group">
                    <label class="col-md-4 col-lg-4 control-label" style="background-color:burlywood">Label3:</label>
                    <div class="col-md-8 col-lg-8"><input type="text" class="form-control" /></div>
                </div>
            </div>


        </div>

    <div class="row">

        <div class="col-md-12 col-lg-12" style="background-color:red">
            <div class="form-group">
                <label class="col-md-4 col-lg-4 control-label" style="background-color:burlywood">Label4:</label>
                <div class="col-md-8 col-lg-8"><input type="text" class="form-control" /></div>
            </div>
        </div>            


    </div>

我有这个引导程序布局。我在对齐第二行控件时遇到问题。

我希望Label 1在Label 1下对齐。然后我要用于文本框的宽度的其余部分（或复选框列表，连续三个复选框）

我无法弄清楚如何做到这一点。将不胜感激任何帮助。

Answer 1

怎么样：

<div class="container-fluid">
    <div class="row">
        <div class="form-group" style="margin: 0;">
            <label class="col-md-1 control-label" style="background-color:burlywood">Label1:</label>
            <div class="col-md-3"><input type="text" class="form-control" /></div>
        </div>

        <div class="form-group" style="margin: 0;">
            <label class="col-md-1 control-label" style="background-color:burlywood">Label2:</label>
            <div class="col-md-3"><input type="text" class="form-control" /></div>
        </div>

        <div class="form-group" style="margin: 0;">
            <label class="col-md-1 control-label" style="background-color:burlywood">Label3:</label>
            <div class="col-md-3"><input type="text" class="form-control"/></div>
        </div>
    </div>

    <div class="row">
        <div class="form-group">
        <label class="col-md-1 control-label" style="background-color:burlywood">Label4:</label>
        <div class="col-md-11"><input type="text" class="form-control" /></div>
    </div>
</div>

小提琴： https://jsfiddle.net/oligustafsson/cpqor8kx/2/

Bootstrap网格布局第二行格式化

1 个答案: