Question

我正在使用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>

THE OVERRIDE-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;
}

布局破损的图像： Broken and Ugly I'd like it to stay looking like this

Answer 1

嗯......说实话，除了部分覆盖Twitter Bootstrap CSS之外，我没有找到一个好的解决方法。问题是响应.span4（包含表单的元素）的宽度最终会比<label>和{{1}的组合硬编码宽度和边距小得多表单中的元素。

这些元素确实有一个替代布局，<input>堆叠在<label>之上，这恰好适合<input>。但是，在通过媒体查询达到足够窄的屏幕宽度之前，不会应用此CSS。（如果你让屏幕变得更窄，你会发现这种变化。）

您可以编写另一个媒体查询，以不同的屏幕宽度应用这些样式（当视口仍然很宽，但.span4太窄时），但是因为您不想要对那些人太过分了，我走了另一条路。

所以我添加到你的重写CSS的定义是：

.span4

你会注意到这会删除/覆盖我之前提到的许多额外宽度和边距。因此，您的表单最终会看起来有点不同（左侧的额外空间消失了，并且更改了一些文本对齐）。现在，这些元素将崩溃成一个小屏幕＆＃34;相对于父级的狭窄而不是视口的布局。当然，如果您觉得设计变更超过响应性，请随意不使用此解决方案。

如果这不是你想要的，请告诉我，我会很乐意进一步提供帮助。祝你好运！

Twitter Bootstrap问题：输入字段溢出（无响应）

1 个答案: