html - bootstrap 3 上密码/用户名输入表单的默认样式类？

Question

所以我正在制作一个 php 登录页面。我已经完成了登录应用程序，但我只需要一个类列表，这些类将按照我想要的方式设计我的登录表单。

现在登录表单的图片 - http://i.imgur.com/mrfvXXq.png

我需要对其进行样式设置，使其位于屏幕中央，并且不会占据整个宽度。

我希望它看起来像这样 - http://i.imgur.com/C6G0FGK.png

现在我需要它在屏幕上居中。请注意，我没有在电子邮件输入和文本框中添加。只有我的用户名和密码输入。我只需要样式。

如需实时版本，请访问 gippixservers.com/zAdmin/admindashboard

代码- ">

<div class = "form-group">
<label for="txtUsername" class = "col-lg-2 control-label">Username:</label> 

<div class = "col-lg-10">
                    <input class = "form-control input-block-level" type="text" title="Enter your Username" name="txtUsername" placeholder = "Username" />
</div>

</div>

<div class = "form-group">
<label for="txtPassword" class = "col-lg-2 control-label">Password:</label> 

<div class = "col-lg-10">
<input class = "form-control input-block-level" type="password" title="Enter your     password" name="txtPassword" placeholder = "Password" />
</div>

</div>

<div class = "form-control">
<input class = "btn btn-primary" type="submit" name="Submit" value = "Login"></input>
</div> 

</form>

Answer 1

Bootstrap 使用网格系统来放置元素:

一行可以有 12 个网格。我在代码中使用了col-*-offset，这会在开头留出空间。所以我基本上做的是:

form class="form-horizontal col-md-offset-4 col-md-4" name="form" method="post" action="/zAdmin/admindashboard.php"

这意味着，在表格前保留 4 格长度的网格，并将表格设置为 4 格长度，这样您的表格就会居中。 [右边剩下的空间是4，加起来是12]

您的登录按钮附近也进行了一些更改。使用类 pull-right 将元素定位到右侧。

另外，删除这个:

#gippix-adminControl {
width: 50%;
margin: 0 auto;
}

这已经用我上面提到的类完成了。

Fiddle Demo