<!-- 在左栏中放置一个表单 - 来自 Bootstrap 官方表单水平示例的精确副本--><form class="form-horizontal" role="form"><div class="form-group"><label for="inputEmail3" class="col-sm-2 control-label">电子邮件</label><div class="row"><div class="col-sm-10"><input type="email" class="form-control" id="inputEmail3" placeholder="Email">
一旦我添加了它，标签和表单字段就会堆叠起来.
I have a number of Twitter Bootstrap 3 form-horizontal style forms that are nested in columns on various pages. Generally, when there is enough room for the labels and inputs to appear side-by-side, then they do so, else the label appears above the input. All well and good, and as expected and desired.
However, when there is not much width available to start with for the form, say the form is inside an outer columns that's 3 of 12 wide using the Bootstrap 12 column grid system, I'm seeing the labels being cut off and disappearing underneath the inputs instead of seeing the labels moving above the inputs. To clarify, if the labels were above then there would be enough width in the form for everything to be visible.
You can see a simplified example of this occurring here, which uses the form-horizontal example found in the Twitter Bootstrap 3 documentation:
http://jsfiddle.net/BF4ZK/
In the example shown above, the "Email" and "Password" labels are truncated instead of moving above the inputs. The code for this is as follows:
<!DOCTYPE html><html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<!-- always have two side-by-side columns -->
<div class="col-xs-3">
<!-- place a form in the left column - exact copy from Bootstrap official example of form-horizontal -->
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
</div>
<div class="col-xs-9">
3 col to left, 9 col to right.
</div>
</div>
</div>
</body>
If the form in this example were moved to be in the 9 column section on the right of the page instead of the smaller 3 column section on the left of the page then it would behave responsively as expected and would typically display side-by-side or move above if there is not enough room. I've tried a lot of variations including multiple col-xs, col-sm, col-md, col-lg and even rolling my own solution without form-horizontal and label controls, adding rows around the form, changing Bootstraps max widths, and so on. Things seem to be fairly consistent in that the form acts responsively as expected if it lives in a wider section of the page.
Has anyone encountered this before or know of a solution? This appears to be a Twitter Bootstrap 3 bug but I may be doing something incorrectly so would welcome any corrections. I have a workaround that forces form-horizontals to always be vertical but I'd really like to get form-horizontal working the way it is intended in Twitter Bootstrap.
Many thanks in advance for any feedback.
解决方案
Anytime you nest a column within another column, you must have that wrapped with a NEW row:
<div class="col-xs-3">
<!-- place a form in the left column - exact copy from Bootstrap official example of form-horizontal -->
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="row">
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
Once I added that, the labels and form fields stacked.
这篇关于Twitter Bootstrap 3 - 嵌套表单-水平响应式设计问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
