【发布时间】：2016-08-19 19:40:36
【问题描述】：
我使用的是 Bootstrap 3，并且我有一个相当标准的页面布局：左侧一列宽 (.col-md-8)，包含纯文本，右侧一列较窄 (.col-md-4)，包含一个表格。
每个表单字段依次包装在 .form-group 中。
在my first attempt 中，.form-groups 溢出到包含列的左右边缘。 （确保 JSFiddle 预览框架至少与 Bootstrap 的 sm 断点一样宽。）我添加了一个粉红色背景 div 以显示 .form-groups 应该留在其中的框。
在my second attempt 中，我在.col-md-4 内部添加了一个.container，然后将每个.form-group 包装在.row 内部和一个.col-md-4。
这可以解决问题，但是……这是正确且首选的方法吗？似乎需要大量额外的样板标记来实现应该自然发生的事情。
Bootstrap 文档非常好，但它们掩盖了一些像这样的“全局”内容。也许这些东西对于已经熟悉响应式 CSS 的人来说是显而易见的，但对于像我这样的初学者来说可能会很困惑。
这是我第一次尝试的代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='//code.jquery.com/jquery-2.1.0.js'></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
</script>
<head>
<body>
<div class="container">
<h1>Broken version</h1>
<h2>Don't forget to expand the width of this preview window. Otherwise you'll just see Boostrap's xs (vertically stacked) layout.</h2>
<div class="row">
<div class="col-md-8">
<div style="background-color: orange;">
<p>This column will be filled with text. Lorem ipsum dolor sit amet...</p>
</div>
</div> <!-- .col-md-8 -->
<div class="col-md-4">
<div style="background-color: pink;">
<form role="form" class="form-horizontal">
<div class="form-group">
<label class="control-label" for="name">Name</label>
<input class="form-control" type="text" name="name" id="name">
</div>
<div class="form-group">
<label class="control-label" for="email">Email</label>
<input class="form-control" type="email" name="email" id="email">
</div>
<button type="submit">Submit</button>
</form>
</div> <!-- pink background div -->
</div> <!-- .col-md-4 -->
</div> <!-- .row -->
</div> <!-- .container -->
</body>
</html>
这是我第二次尝试的代码，可能已更正：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='//code.jquery.com/jquery-2.1.0.js'></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
</head>
<body>
<div class="container">
<h1>Corrected (?) version</h1>
<h2>Don't forget to expand the width of this preview window. Otherwise you'll just see Boostrap's xs (vertically stacked) layout.</h2>
<div class="row">
<div class="col-md-8">
<div style="background-color: orange;">
<p>This column will be filled with text. Lorem ipsum dolor sit amet...</p>
</div>
</div> <!-- .col-md-8 -->
<div class="col-md-4">
<div style="background-color: pink;">
<div class="container">
<form role="form" class="form-horizontal">
<div class="row">
<div class="form-group col-md-4">
<label class="control-label" for="name">Name</label>
<input class="form-control" type="text" name="name" id="name">
</div>
</div>
<div class="row">
<div class="form-group col-md-4">
<label class="control-label" for="email">Email</label>
<input class="form-control" type="email" name="email" id="email">
</div>
</div>
<button type="submit">Submit</button>
</form>
</div> <!-- .container -->
</div> <!-- .pink background div -->
</div> <!-- .col-md-4 -->
</div> <!-- .row -->
</div> <!-- .container -->
</body>
</html>
【问题讨论】：
-
你不需要使用 .form-horizontal 所以不要因为这不是 .form-horizontal 的情况。查看 .form-horizontal 示例的文档，这不是您使用该类的地方。在表单上不使用任何类，并看到您不需要 .container 将 .form-group 上的负边距清零
-
如果你想要一些底部边距，你可以使用 .form-group 而不是 .row。
标签： css twitter-bootstrap twitter-bootstrap-3