Twitter Bootstrap問題：輸入字段溢出（無響應）
[英]Twitter Bootstrap Issue: Input field overflow (non-responsive)
問題描述
我正在使用Twitter引導程序構建網站，並且正在以響應時間為中心對齊的水平表格工作...但是，輸入字段在某些瀏覽器寬度處溢出。 有沒有一種簡單的方法可以解決此問題，而又不會弄亂媒體查詢，也許我在標記中丟失了某些內容？ 我正在使用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;
}
布局中斷的圖片：
1 個解決方案
解決方案1
1 已采納 2013-08-12 18:04:07
嗯...老實說，除了部分覆蓋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;
}
您會注意到，這消除/覆蓋了我前面提到的許多額外寬度和邊距。 因此，您的表單最終看起來會有所不同（左側多余的空間消失了，文本對齊方式也有所更改）。 現在，相對於其父級（而不是視口）的狹窄程度，元素將折疊為“小屏幕”布局。 當然，如果您認為設計變更超過響應能力，請不要使用此解決方案。
如果這不是您想要的，請告訴我，我們將竭誠為您服務。 祝好運！
Bootstrap 3“btn-group”在小屏幕上的無響應行為
[英]Bootstrap 3 "btn-group" non-responsive behavior on small screens
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.