Bootstrap 形式 - 降低高度

Question

有一个 17 行的表单（每行大约 2-3 个控件）。在下面复制了我的示例 html。

1) 要求将所有控件的高度减半。 Bootstrap 初学者，目前正在学习。

2) 还有如何控制文本字段的输入大小。

3) 还想在一些控件周围使用字段集。

感谢任何指针。

谢谢，

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
    href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">


</head>

<body>
    <div class="container">
        <form class="form-horizontal" role="form">
                <div class="form-group">
                    <div class="col-sm-1">
                        <label class="control-label" for="row11">Label11:</label>
                    </div>
                    <div class="col-sm-1">
                        <input type="text" class="form-control" id="row11"
                            placeholder="Data 11">
                    </div>
                    <div class="col-sm-1">
                        <label class="control-label" for="row12">Label12:</label>
                    </div>

                    <div class="col-sm-6">
                        <input type="text" class="form-control" id="row12">
                    </div>
            </div>
            <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-1">
                        <label class="control-label" for="row21">Label21:</label>
                    </div>

                    <div class="col-sm-1">
                        <input type="text" class="form-control" id="row21"
                            placeholder="Data21">
                    </div>
                    <div class="col-sm-1">
                        <label class="control-label" for="row22">Label22:</label>
                    </div>

                    <div class="col-sm-1">
                        <input type="text" class="form-control" id="row22" placeholder="Data 22">
                    </div>
            </div>


                <div class="form-group">
                    <div class="col-sm-1">
                        <label class="control-label" for="row31">Label31:</label>
                    </div>

                    <div class="col-sm-1">
                        <input type="text" class="form-control" id="row31"
                            placeholder="Data31">
                    </div>
                </div>

            <div class="form-group">
                    <div class="col-sm-1">
                        <label class="control-label" for="row41">Label41:</label>
                    </div>

                    <div class="col-sm-8">
                        <input type="text" class="form-control" id="row41"
                            placeholder="Data41">
                    </div>
                </div>

            <div class="form-group">


                    <div class="col-sm-offset-1 col-sm-8">
                        <input type="text" class="form-control" id="row41"
                            placeholder="Data42">
                    </div>
                </div>

            <div class="form-group">
                    <div class="col-sm-1">
                        <label class="control-label" for="row51">Label51:</label>
                    </div>

                    <div class="col-sm-2">
                        <input type="text" class="form-control" id="row51"
                            placeholder="Data51">
                    </div>
                </div>

            <div class="form-group">
                    <div class="col-sm-1">
                        <label class="control-label" for="row61">Label61:</label>
                    </div>

                    <div class="col-sm-2">
                        <input type="text" class="form-control" id="row61"
                            placeholder="Data61">
                    </div>
                    <div class="col-sm-offset-3 col-sm-1">
                        <label class="control-label" for="row62">Label62:</label>
                    </div>

                    <div class="col-sm-2">
                        <input type="text" class="form-control" id="row62"
                            placeholder="Data62">
                    </div>
                </div>

            <div class="form-group">
                    <div class="col-sm-1">
                        <label class="control-label" for="row71">Label71:</label>
                    </div>

                    <div class="col-sm-2">
                        <input type="text" class="form-control" id="row71"
                            placeholder="Data71">
                    </div>
                    <div class="col-sm-offset-3 col-sm-1">
                        <label class="control-label" for="row72">Label72:</label>
                    </div>

                    <div class="col-sm-2">
                        <div class="dropdown">
                            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
    Ddown
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
                            </ul>
                        </div>
                    </div>
                </div>

            <div class="form-group">
                    <div class="col-sm-1">
                        <label class="control-label" for="row81">Label81:</label>
                    </div>

                    <div class="col-sm-2">
                        <input type="text" class="form-control" id="row81"
                            placeholder="Data81">
                    </div>
                    <div class="col-sm-offset-3 col-sm-1">
                        <label class="control-label" for="row82">Label82:</label>
                    </div>

                    <div class="col-sm-2">
                        <div class="dropdown">
                            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
    Ddown
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            <div class="form-group">
                    <div class="col-sm-1">
                        <label class="control-label" for="row91">Label91:</label>
                    </div>

                    <div class="col-sm-3">
                        <input type="text" class="form-control" id="row91"
                            placeholder="Data91">
                    </div>
                    <div class="col-sm-offset-2 col-sm-1">
                        <label class="control-label" for="row92">Label92:</label>
                    </div>

                    <div class="col-sm-1">
                        <div class="dropdown">
                            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
    Ddown
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
                            </ul>
                        </div>
                    </div>
                </div>

            <div class="form-group">
                    <div class="col-sm-1">
                        <label class="control-label" for="row101">Label101:</label>
                    </div>

                    <div class="col-sm-3">
                        <input type="text" class="form-control" id="row101"
                            placeholder="Data10-1">
                    </div>
                    <div class="col-sm-offset-2 col-sm-1">
                        <label class="control-label" for="row10-2">Label102:</label>
                    </div>


                        <div class="col-sm-1 dropdown">
                            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
    Ddown
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
                            </ul>
                        </div>

                </div>

            <div class="form-group">
                    <div class="col-sm-1">
                        <label class="control-label" for="row11-1">Label111:</label>
                    </div>

                    <div class="col-sm-3">
                        <input type="text" class="form-control" id="row11-1"
                            placeholder="Data11-1">
                    </div>
                    <div class="col-sm-offset-2 col-sm-1">
                        <label class="control-label" for="row11-2">Label112:</label>
                    </div>

                    <div class="col-sm-1">
                        <div class="dropdown">
                            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
    Ddown
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
                            </ul>
                        </div>
                    </div>
                </div>

            <div class="form-group">
                    <div class="col-sm-1">
                        <label class="control-label" for="row12-1">Label121:</label>
                    </div>

                    <div class="col-sm-3">
                        <input type="text" class="form-control" id="row12-1"
                            placeholder="Data12-1">
                    </div>
                </div>

            <div class="form-group">
                    <div class="col-sm-1">
                        <label class="control-label" for="row13-1">Label131:</label>
                    </div>

                    <div class="col-sm-4">
                        <input type="text" class="form-control" id="row13-1"
                            placeholder="Data13-1">
                    </div>
                </div>

            <div class="form-group">
                    <div class="col-sm-1">
                        <label class="control-label" for="row14-1">Label141:</label>
                    </div>

                    <div class="col-sm-1">
                        <input type="text" class="form-control" id="row14-1"
                            placeholder="Data14-1">
                    </div>
                    <div class="col-sm-offset-1 col-sm-1">
                        <label class="control-label" for="row14-2">Label142:</label>
                    </div>

                    <div class="col-sm-2">
                        <input type="text" class="form-control" id="row14-2"
                            placeholder="Data14-2">
                    </div>
                </div>

            <div class="form-group">
                    <div class="col-sm-1">
                        <label class="control-label" for="row15-1">Label151:</label>
                    </div>

                    <div class="col-sm-8">
                        <input type="text" class="form-control" id="row15-1"
                            placeholder="Data15-1">
                    </div>
                </div>

            <div class="form-group">
                    <div class="col-sm-1">
                        <label class="control-label" for="row16-1">Label161:</label>
                    </div>

                    <div class="col-sm-8">
                        <input type="text" class="form-control" id="row16-1"
                            placeholder="Data16-1">
                    </div>
                </div>

            <div class="form-group">
                    <div class="col-sm-1">
                        <label class="control-label" for="row17-1">Label171:</label>
                    </div>

                    <div class="col-sm-8">
                        <textarea rows="3" class="form-control" id="row17-1"
                            placeholder="Data17-1"></textarea>
                    </div>
                </div>


        </form>
    </div>

    <script
        src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script
        src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>

Answer 1

我认为作为最后的手段，你可以使用一些 CSS 来强制它。向表单添加一个类，例如“form-widgets-sm”。

然后在 CSS 中：

.form-widgets-sm label {
    height: 15px;
}

.form-widgets-sm input {
    height: 15px;
}

并在那里调整高度（显然 15px 是一个占位符）。您可能还需要修改表单组和/或 div 列。

虽然我确信有更多的引导方式来执行此操作，但这种方法并没有那么具有破坏性（您将一个类添加到表单中），并且可以让您在等待更引导的答案时继续前进.