我正在使用 twitter bootstrap 构建一个站点，并且我正在处理一个响应式的居中对齐表单水平......但是，输入字段在某些浏览器宽度下溢出。有没有一种简单的方法可以解决这个问题而不会弄乱媒体查询，也许我在我的标记中遗漏了一些东西？我正在使用 v. 2.3.2，这是我的代码， HTML:
<!DOCTYPE HTML>
<html lang="en">
<head>
<link type="text/css" rel="stylesheet" charset="utf-8" href="css/bootstrap.css"/>
<link type="text/css" rel="stylesheet" charset="utf-8" href="css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" charset="utf-8" href="css/bootstrap-responsive.css"/>
<link type="text/css" rel="stylesheet" charset="utf-8" href="css/bootstrap-responsive.min.css"/>
<link type="text/css" rel="stylesheet" charset="utf-8" href="override.css"/>
</head>
<body class="home">
<header class="navbar navbar-static-top push">
<div class="navbar-inner navfix">
<div class="container-fluid">
<a class="brand" href="#">The Limos</a>
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="nav-collapse collapse">
<ul class="nav nav-pills pull-right">
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</div>
</div>
</header>
<div class="row-fluid input-wrap">
<div class="span4"></div>
<div class="span4 center-wrap">
<form class="form-horizontal">
<fieldset>
<legend>Get Started Today</legend>
<div class="leftfix">
<div class="control-group row-fluid">
<label class="control-label">Date/Time</label>
<div class="controls">
<input type="text" placeholder="Date/Time...">
</div>
</div>
<div class="control-group row-fluid">
<label class="control-label">Your Name:</label>
<div class="controls">
<input type="text" placeholder="Your Name...">
</div>
</div>
<div class="control-group row-fluid">
<label class="control-label">Your Email:</label>
<div class="controls">
<input type="text" placeholder="Your Email...">
</div>
</div>
<div class="control-group row-fluid">
<label class="control-label">Phone #:</label>
<div class="controls">
<input type="text" placeholder="Phone #...">
</div>
</div>
<div class="control-group row-fluid">
<label class="control-label">Zip Code:</label>
<div class="controls">
<input type="text" placeholder="Zip Code...">
</div>
</div>
</div>
<br />
<button type="submit" class="btn">Submit</button>
</fieldset>
</form><br />
</div>
<div class="span4"></div>
</div>
</body>
<script src='http://code.jquery.com/jquery-latest.min.js'></script>
<script src="js/bootstrap.js"></script>
</html>
覆盖 CSS:
.right-align {
text-align: right;
}
.inline-block {
display: inline-block;
}
.homelogo {
padding-top: 15px;
padding-left: 20px;
font-size: 26px;
}
.homenav {
padding-top: 15px;
padding-right: 20px;
margin-bottom: 0px !important;
font-size: 16px;
}
.navfix {
background: rgba(0, 0, 0, 0.0);
background: transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50990000,endColorstr=#50990000);
zoom: 1;
border-bottom: 0;
}
.home {
background: #000000;
}
.navbar .brand {
text-shadow: 0 1px 0 #333333;
}
.navbar .nav>li>a{
background: #666666;
border-radius: 5px;
color: #000000;
text-shadow: 0 1px 0px #666666;
}
.navbar .nav>li>a:hover {
background: #cccccc;
}
.push {
margin-top: 55px;
}
.input-wrap .center-wrap {
margin-top: 100px;
background: #cccccc;
border: 1px #999999;
border-radius: 5px;
}
.leftfix {
text-align: left;
}
input {
max-width: 100% !important;
}
.form-horizontal > fieldset {
padding: 10px;
}
布局损坏的图像:
最佳答案
嗯……老实说，除了部分覆盖 Twitter Bootstrap CSS 之外，我没有找到好的解决方法。问题是响应 .span4 的宽度(您的表单所在的元素)最终可能比 <label> 的组合硬编码宽度和边距小得多。和 <input>表单中的元素。
这些元素确实有一个替代布局，其中 <label>堆叠在 <input> 之上, 这将完全适合 .span4 .但是，在通过媒体查询达到足够窄的屏幕宽度之前，不会应用此 CSS。 (如果将屏幕缩小很多，就会看到这种变化。)
你可以编写另一个媒体查询，在不同的屏幕宽度上应用这些样式(当视口(viewport)仍然很宽，但 .span4 太窄时)，但因为你不想太麻烦那些，我走了一条不同的路。
所以我添加到您的覆盖 CSS 中的定义是:
.form-horizontal .control-label{
text-align:left;
padding-top: 5px;
margin-right:20px;
width:80px;
}
.form-horizontal .controls{
float:left;
margin-left: 0;
}
您会注意到，这会删除/覆盖我之前提到的许多额外宽度和边距。因此，您的表单最终会看起来有点不同(左侧的额外空间消失了，并且文本对齐方式发生了一些变化)。但是现在，元素将折叠成一个相对于其父元素的窄度的“小屏幕”布局，而不是相对于视口(viewport)的窄度。当然，如果您觉得设计更改超过了响应能力，请不要使用此解决方案。
如果这不是您想要的，请告诉我，我们很乐意进一步提供帮助。祝你好运!
关于html - Twitter Bootstrap 问题 : Input field overflow (non-responsive)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18192247/