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

Question

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

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

我需要设置它的样式，使其在屏幕上居中，并且也不会占据整个宽度。

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

现在我需要它以屏幕为中心。注意我不添加电子邮件输入和文本框。只有我的用户名和密码输入。我需要的只是风格。

有关实时版本，请访问gippixservers.com/zAdmin/admindashboard

代码 -     ＆＃34;＆GT;

<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 =＆＃34; form-horizo​​ntal col-md-offset-4 col-md-4 ＆＃34;命名=＆＃34;形式＆＃34;   方法=＆＃34;后＆＃34;行动=＆＃34; /zAdmin/admindashboard.php"

这意味着，在表单前留下4个长度的网格，并将表单设置为网格4长度，从而使表单居中。 [右边的剩余空间是4，总共一起使它成为12]

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

此外，删除此：

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

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

<强> Fiddle Demo

Answer 2

我认为您要求将实时版本缩小并居中？

您需要将以下内容添加到表单标记中。或者将表格包装在div中。

width: 50%; /* or whatever width you see fit */
margin: 0 auto;

或者，您可以查看所有bootstraps预定义表单显示选项 - getbootstrap.com/css/#forms

或在您的div上<div id="gippix-adminControl" ... inputs... </div> 只需将你的CSS调整为

#gippix-adminControl input{
   width: blah;
   max-width: blah;
   min-width: blah;
}

要将登录按钮向右移动，只需设置

即可

<input class="btn btn-primary" type="submit" name="Submit" value="Login">

在您的css表或内联中

到float: right;。

Answer 3

您可以为.gippix-adminControl css类添加最大宽度，然后从那里开始。

.container{max-width: 500px;}

您还可以删除按钮周围的div，这将消除意外的边框。然后放一个浮动：右边的按钮，你会有一个漂亮的登录表单！

你也可以像这样制作一个.loginbutton-right css类：

.loginbutton-right{float: right;}

并将该课程添加到您的按钮！

结果如下：