gre*_*600 12 css twitter-bootstrap twitter-bootstrap-3
我正在使用Bootstrap 3,我有一个相当标准的页面布局:左边的一个宽列(.col-md-8)包含纯文本,右边有一个较窄的列(.col-md-4),包含一个表单.
反过来,每个表单字段都包含在一个.form-group.
在我的第一次尝试中,.form-groups溢出了包含列的左右边缘.(确保JSFiddle预览框架至少与Bootstrap的sm断点一样宽.)我添加了一个粉红色的背景div来显示.form-groups 应该保留的框.
在我的第二次尝试中,我添加了一个.container内部.col-md-4,然后包裹每个.form-group内部的a .row 和 a .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>
Chr*_*ina 14
以前的两个答案都缺乏阅读Bootstrap文档.
您不需要使用.form-horizontal,因为这不是一种.form-horizontal情况.查看文档中的.form-horizontal示例,这不是您使用该类的地方.在表单上不使用任何类,然后您不需要.container将负边距归零.form-group.
.form-horizontal与没有嵌套.container的没有和没有你的相同(阅读文档).
这个:
<div class="form-group col-md-4">
就像在.row上放一个列类一样,它会让事情变得非常糟糕.
只需使用:
<div class="form-group">
| 归档时间： |
|
| 查看次数： |
29414 次 |
| 最近记录： |