如何在twitter bootstrap中使用span和offset类
Rit*_*tta 9 html5 twitter-bootstrap
我只是Twitter Bootstrap的初学者.
我试图通过使用类span和offset来使用它的网格功能.
这是我的代码:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
ul.unstyled > li {
list-style-type: none;
}
</style>
</head>
<body>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<div class="row">
<div class="span3 offset5">
<ul class="unstyled">
<li>
<label for="optionsRadios1">A.</label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>Option 1
</li>
<li>
<label for="optionsRadios2">B.</label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Option 2
</li>
<li>
<label for="optionsRadios3">C.</label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3">option3</li>
<li><label for="optionsRadios4">D.</label>
<input type="radio" name="optionsRadios" id="optionsRadios4" value="option4">option4</li>
<li><label for="optionsRadios5">E.</label>
<input type="radio" name="optionsRadios" id="optionsRadios5" value="option5">option5</li>
</ul>
</div>
</div>
<div class="row">
<div class="span3 offset5">
<input type="checkbox">Mark To review</input>
</div>
</div>
</body>
</html>
谁能告诉我我在哪里错了？我没有在我的网页上获得偏移保证金.
我使用了Bootstrap示例中描述的代码http://twitter.github.io/bootstrap/scaffolding.html#gridSystem 我的HTML网页代码是
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<div class="row">
<div class="span9">
Level 1 column
<div class="row">
<div class="span6">Level 2</div>
<div class="span3">Level 2</div>
</div>
</div>
</body>
</html>
我没有得到没有边距或抵消的页面.这是截图:
我无法指出问题所在.
初步答复
您必须将<div>元素包装在<div class="row">元素中.这应该可以解决问题.请查看http://twitter.github.io/bootstrap/scaffolding.html#gridSystem上的示例以了解更多信息.
<div class="row">
<div class="span4">...</div>
<div class="span3 offset2">...</div>
</div>
此外,您不会关闭<input>元素,这可能会产生不希望的结果.最后我找不到Bootstrap的CSS文件的任何导入.因此,您的网页中不提供网格系统的样式.
这是一个有效的jsFiddle:http://jsfiddle.net/VTbAA/1/
更新(第2个例子)
同样,您错过了CSS导入.添加Bootstrap的CSS文件后,它可以正常工作.请注意,您也缺少关闭某些<div>元素.此外,Bootstrap提供了一个基于12的网格系统.因此,您的列最多应为12.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<div class="span12">Level 1 column</div>
</div>
<div class="row">
<div class="span6 offset3">Level 2</div>
<div class="span3">Level 2</div>
</div>
</body>
</html>
重要的一行是进口声明:
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css">