我在一个小 div 中使用 bootstrap 3。当我通过拖动窗口来增加窗口的宽度时 - 应该留在 div 内部的字段(用户名和密码输入字段)移出到几乎窗口的中心。为什么？ CSS 和 HTML 在下面
<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>
CSS----
.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;
}
最佳答案
包含标签的元素 (.col-xs-4) 的宽度为 33.33333%。
包含输入字段的元素 (.col-xs-8) 的宽度为 66.6666667%。
当屏幕很窄时，这些宽度值很小，标签和输入靠得很近。
当屏幕扩大时，这些宽度值也会扩大，从而在标签和输入之间创建一个逐渐变大的间隙。
答案是给容器一个宽度约束。
将此样式添加到容器类:
.col-md-12 { max-width: 250px; }
我在 Chrome 中对其进行了测试，它可以正常工作。另外，这是一个现场演示: http://jsfiddle.net/y0psw5dn/
关于html - Bootstrap 3 - 元素不会停留在 div 的宽度内，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32240783/