Html Bootstrap 3-元素赢得'；Don’不要呆在沙发的宽度内
我在一个小div中使用bootstrap3。当我通过拖动窗口来增加窗口的宽度时，应该留在div内部的字段（用户名和密码输入字段）几乎移动到窗口的中心。为什么？下面是CSS和HTMLHtml Bootstrap 3-元素赢得'；Don’不要呆在沙发的宽度内,html,css,twitter-bootstrap-3,Html,Css,Twitter Bootstrap 3,我在一个小div中使用bootstrap3。当我通过拖动窗口来增加窗口的宽度时，应该留在div内部的字段（用户名和密码输入字段）几乎移动到窗口的中心。为什么？下面是CSS和HTML <body> <div class="login"> <div class="container"> <div class="col-md-12"> <div class="row"> &l
<body>
<div class="login">
<div class="container">
<div class="col-md-12">
<div class="row">
<form action="https://www.blah/login"/>
<h3>Login</h3>
<div class="col-xs-4">UserName:</div>
<div class="col-xs-8"><input class="rounded white" type="text" name="username" placeholder="Username:" required/><br></div>
<div class="col-xs-4">Password:</div>
<div class="col-xs-8"><input class="rounded white" type="password" name="password" placeholder="Password:" required/><br></div>
<input type="checkbox" name="retrieve" value="true"/>I forgot my password.
<ul class="no-bullets">
<li><input class="color-brown white rounded float-left" type="submit" name="register" value="Submit Now"></li>
<li><input class="rounded margin-left-5px" data-dismiss="modal" type="submit" value="Cancel"></li>
</ul>
</div>
</div>
</div>
</div>
</body>
您似乎未正确设置
。登录至高度：200px
.login{
/*height:200px*/
}
包含标签的元素（.col-xs-4
）具有宽度：33.33333%
包含输入字段（.col-xs-8
）的元素具有宽度：66.66667%
当屏幕较窄时，这些宽度值较小，标签和输入靠得很近
当屏幕扩展时，这些宽度值也会扩展，从而在标签和输入之间产生越来越大的间隙
答案是给容器一个宽度限制。
将此样式添加到容器类：
.col-md-12 { max-width: 250px; }
我在Chrome上测试了它，效果很好。此外，这里还有一个现场演示：
试试这个
<div class="login">
<div class="row">
<div class="col-md-12">
<form action="https://www.blah/login" />
<h3>Login</h3>
<div class="col-xs-4">UserName:</div>
<div class="col-xs-8">
<input class="rounded white" type="text" name="username" placeholder="Username:" required/>
<br>
</div>
<div class="col-xs-4">Password:</div>
<div class="col-xs-8">
<input class="rounded white" type="password" name="password" placeholder="Password:" required/>
<br>
</div>
<input type="checkbox" name="retrieve" value="true" />I forgot my password.
<ul class="no-bullets">
<li>
<input class="color-brown white rounded float-left" type="submit" name="register" value="Submit Now">
</li>
<li>
<input class="rounded margin-left-5px" data-dismiss="modal" type="submit" value="Cancel">
</li>
</ul>
</div>
</div>
</div>
.login {
height: 200px;
width: 330px;
max-width: 330px;
padding: 10px 20px 10px 20px;
background-color: #242424;
border: 1px solid #545454;
border-radius: 5px;
color: #ddd;
}
登录
用户名：
密码：
我忘记密码了。
-
-
.登录{
高度：200px；
宽度：330px；
最大宽度：330px；
填充：10px 20px 10px 20px；
背景色：#2424；
边框：1px实心#5454；
边界半径：5px；
颜色：#ddd；
}
只需将.login
div放在.container
div下面。代码下面是
<div class="container">
<div class="login">
请看演示
我改变了你的结构。有一些错误。您可以在上查看此演示，只需像这样更改html的上部起始结构
我也在这里使用Bootstrap 3，请查看此代码。
这里没有组织您的HTML代码结构。首先，您需要了解它的行和列体系结构，它背后的目的是什么
在很多地方，你可以打开div，但是你没有在需要关闭div的适当位置关闭div
我使用了以下HTML代码：
<div class="container">
<div class="col-md-12 login">
<form action="https://www.blah/login"/>
<h3>Login</h3>
<div class="row">
<div class="col-xs-4">UserName:</div>
<div class="col-xs-8">
<input class="rounded white" type="text" name="username" placeholder="Username" required/><br>
</div>
</div>
<div class="row">
<div class="col-xs-4">Password:</div>
<div class="col-xs-8">
<input class="rounded white" type="password" name="password" placeholder="Password" required/><br>
</div>
</div>
<div class="row">
<div class="col-md-12">
<input type="checkbox" name="retrieve" value="true"/> I forgot my password.
</div>
</div>
<div class="row">
<div class="col-md-6">
<input class="bg-default btn-font" type="submit" name="register" value="Submit Now">
</div>
<div class="col-md-6">
<input class="bg-default btn-font" data-dismiss="modal" type="submit" value="Cancel">
</div>
</div>
</div>
下面是我的跑步小提琴示例：
您好，请检查下面的代码，它应该在容器中
<div class="container">
<div class="login">
<div class="col-md-12">
<div class="row">
<form action="https://www.blah/login"/>
<h3>Login</h3>
<div class="col-xs-4">UserName:</div>
<div class="col-xs-8"><input class="rounded white" type="text" name="username" placeholder="Username:" required/><br></div>
<div class="col-xs-4">Password:</div>
<div class="col-xs-8"><input class="rounded white" type="password" name="password" placeholder="Password:" required/><br></div>
<input type="checkbox" name="retrieve" value="true"/>I forgot my password.
<ul class="no-bullets">
<li><input class="color-brown white rounded float-left" type="submit" name="register" value="Submit Now"></li>
<li><input class="rounded margin-left-5px" data-dismiss="modal" type="submit" value="Cancel"></li>
</ul>
</div>
</div>
</div>
登录
用户名：
密码：
我忘记密码了。
检查此处这是您刚刚发布的小提琴，用一行额外的代码修改：。。。有关更多详细信息，请参见下面我的答案。@MichaelDWheeler请查看答案
.login { height: 200px; width: 330px; max-width: 330px; padding: 10px 0px 10px 20px; background-color: #242424; border: 1px solid #545454; border-radius: 10px; color: #ddd; } .btn-font{ color: #000; }
<div class="container">
<div class="login">
<div class="col-md-12">
<div class="row">
<form action="https://www.blah/login"/>
<h3>Login</h3>
<div class="col-xs-4">UserName:</div>
<div class="col-xs-8"><input class="rounded white" type="text" name="username" placeholder="Username:" required/><br></div>
<div class="col-xs-4">Password:</div>
<div class="col-xs-8"><input class="rounded white" type="password" name="password" placeholder="Password:" required/><br></div>
<input type="checkbox" name="retrieve" value="true"/>I forgot my password.
<ul class="no-bullets">
<li><input class="color-brown white rounded float-left" type="submit" name="register" value="Submit Now"></li>
<li><input class="rounded margin-left-5px" data-dismiss="modal" type="submit" value="Cancel"></li>
</ul>
</div>
</div>
</div>