我似乎无法弄清楚为什么引导程序3似乎无法在较小的屏幕尺寸上正确呈现水平格式。

标签应全部右对齐(而不是左对齐),其垂直对齐应为基线,以便文本与输入对齐。

在“ Nexus 5”设备或真正的移动设备上的Chrome中以移动模式呈现时,此功能不起作用。

关于我错过/弄错了什么的任何想法吗?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body style="margin-top: 20px">
    <div class="container-fluid">
        <div class="row">

            <div class="col-xs-12 col-sm-7 col-md-5 col-lg-4">
                <div class="panel panel-primary">
                    <div class="panel-heading">My Panel Heading</div>
                    <div class="panel-body">
                        <form class="form-horizontal">
                            <div class="form-group">
                                <label class="control-label col-xs-5">Test Label</label>
                                <div class="controls col-xs-7">
                                    <input class="form-control" type="text" placeholder="My Test Value A"/>
                                </div>
                            </div>
                        </form>
                        <form class="form-horizontal">
                            <div class="form-group">
                                <label class="control-label col-xs-5">Really Long Test Label</label>
                                <div class="controls col-xs-7">
                                    <input class="form-control" type="text" placeholder="My Test Value B"/>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

最佳答案

覆盖引导程序3.3.6默认为:

@media (min-width: 1px) {
  .form-horizontal .control-label {
    padding-top: 7px;
    margin-bottom: 0;
    text-align: right;
  }
}

10-07 19:41
查看更多