使用col- *的Bootstrap下拉表格宽度

时间:2013-10-23 07:32:22

标签: forms twitter-bootstrap drop-down-menu width

我正在尝试使用Bootstrap 3在导航栏中制作下拉登录表单,但它看起来不太好 - 标签和输入比下拉...面板更宽。 如何使用 col - * Bootstrap类更改下拉表格

以下是代码(http://getbootstrap.com/css/#forms-horizontal):

<ul class="nav navbar-nav navbar-right">
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Sign in <b class="caret"></b></a>
        <div class="dropdown-menu">
            <form class="form-horizontal" role="form">
                <div class="form-group">
                    <label for="inputEmail" class="col-lg-2 control-label">Email</label>
                    <div class="col-lg-10">
                        <input type="email" class="form-control" id="inputEmail" placeholder="Email">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputPassword" class="col-lg-2 control-label">Password</label>
                    <div class="col-lg-10">
                        <input type="password" class="form-control" id="inputPassword" placeholder="Password">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-lg-offset-2 col-lg-10">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox"> Remember me
                            </label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-lg-offset-2 col-lg-10">
                        <button type="submit" class="btn btn-default">Sign in</button>
                    </div>
                </div>
            </form>
        </div>
    </li>
</ul>

提前致谢。

1 个答案:

答案 0 :(得分:0)

您可以向.dropdown-menu添加填充,并将列更改为col-lg-11

示例:http://bootply.com/110118