0
Я строю сайт с использованием twitter bootstrap, и я работаю над выравниванием по горизонтали, которое является отзывчивым ... Однако поля ввода переполняются на определенных ширины браузера. Есть ли простой способ исправить это, не вмешиваясь в медиа-запросы, возможно, я что-то пропустил в своей разметке? Я использую V 2.3.2 и вот мой код, HTML-:.Щебет Bootstrap Проблема: переполнение входного поля (не реагирует)
<!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;
}
Изображения разбитого макета: 
