0

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

布局损坏的图像： 破碎而丑陋 我希望它保持这样

4

1 回答 1

1

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

这些元素确实有一个替代布局，其中 .<label>上方的堆栈<input>可以充分放入.span4. 但是，在通过媒体查询达到足够窄的屏幕宽度之前，不会应用此 CSS。（如果你让屏幕更窄，你会看到这种变化发生。）

您可以编写另一个媒体查询，在不同的屏幕宽度上应用这些样式（当视口仍然很宽，但是.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;
}

您会注意到，这会删除/覆盖我之前提到的许多额外宽度和边距。因此，您的表单最终看起来会有些不同（左侧多余的空间消失了，并且更改了一些文本对齐方式）。不过现在，这些元素将相对于其父元素的窄度，而不是视口的窄度，折叠成一个“小屏幕”布局。当然，如果您认为设计更改超过响应能力，请随意不使用此解决方案。

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

于 2013-08-12T18:04:07.800 回答