每个表单控件都在其自己的行上显示并拉伸整个屏幕

Question

使用Twitter Bootstrap 3，我的表单看起来不错，但我不希望它看起来像这样：

更像这样：

我能够在另一个页面上创建我的按钮组，并使用btn-group-vertical btn-group-lg btn-block类。但我还没有找到任何与Bootstrap 3中的表单控件相同的内容。

我的表单代码：

<!-- login form box -->
<form name="loginform" method="post" action="index.php" role="form">
    <div class="form-group col-lg-3">
        <label for="login_input_username" class="sr-only">Username</label>
        <input type="text" id="login_input_username" name="user_name" class="form-control input-lg" placeholder="Enter username" required />
    </div>
    <div class="form-group col-lg-3">
        <label for="login_input_password" class="sr-only">Password</label>
        <input type="password"  id="login_input_password" name="user_password" class="form-control input-lg" class="form_control" placeholder="Enter password" autocomplete="off" required />
    </div>
    <div class="form-group col-lg-3">
        <button type="submit" name="login" class="btn btn-block btn-success btn-lg"><span class="glyphicon glyphicon-log-in"></span> Login</button>
    </div>
    <div class="form-group col-lg-3">
        // here I display the alert box
    </div>
</form>

Answer 1

您将表单字段包装在col-lg-3中，使它们只有3列宽。从.form-group div。

中删除该类

这将使它们延伸到表格的大小。

Answer 2

我建议不要使用“form-group col-lg-3”类， 使用此类“form-group col-lg-12”。然后它应该填满整个网格宽度。

Answer 3

BaddieProgrammer ，我设置了 Fiddle here 来查看两个选项以及它们的外观。

两者都做你想要的在屏幕上拉伸表格 绿色容器的全宽都是lg大小。

蓝色容器使用Bootstrap类在所有屏幕尺寸上查看时为您提供更多控制和更好的外观。
希望顶级选项能让您更好地了解Bootstrap如何为您工作。

以下为正常尺寸 Fiddle ，以便您查看代码。

<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3 bg-primary block">
    <!-- login form box -->
    <form name="loginform" method="post" action="index.php" role="form">
        <div class="form-group col-lg-12">
            <label for="login_input_username" class="sr-only">Username</label>
            <input type="text" id="login_input_username" name="user_name" class="form-control input-lg" placeholder="Enter username" required />
        </div>
        <div class="form-group col-lg-12">
            <label for="login_input_password" class="sr-only">Password</label>
            <input type="password"  id="login_input_password" name="user_password" class="form-control input-lg" class="form_control" placeholder="Enter password" autocomplete="off" required />
        </div>
        <div class="form-group col-lg-12">
            <button type="submit" name="login" class="btn btn-block btn-success btn-lg"><span class="glyphicon glyphicon-log-in"></span> Login</button>
        </div>
        <div class="form-group col-lg-12">
        <!-- here I display the alert box -->
        </div>
    </form>
</div>