每个表单控件单独显示并拉伸整个屏幕

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

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

两者都执行您想要在屏幕上拉伸表单的操作。
green 容器的全宽全部为 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>

Answer 3

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