Html 如何在 twitter bootstrap 中使用 span 和 offset 类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17002810/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use span and offset class in twitter bootstrap
提问by Ritesh Mehandiratta
I am just a beginner in Twitter Bootstrap.
我只是 Twitter Bootstrap 的初学者。
I am trying to use its grid functionality by using classes span and offset.
我试图通过使用类 span 和 offset 来使用它的网格功能。
Here is my code:
这是我的代码：
<!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>
Can anyone please tell me where I am mistaking? I am not getting offset margin in my webpage.
谁能告诉我我错在哪里？我没有在我的网页中获得抵消保证金。
I used code described in Bootstrap example http://twitter.github.io/bootstrap/scaffolding.html#gridSystemMy HTML webpage code is
我使用了 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>
And I am not getting my page with no margins or offsets. Here's the screenshot:
I am unable to point where the problem is.
而且我的页面没有边距或偏移量。这是屏幕截图：
我无法指出问题出在哪里。
采纳答案by Fynn
Initial Answer
初步答复
You will have to wrap your <div>elements inside a <div class="row">element. this should do the trick. Have a look at the examples at http://twitter.github.io/bootstrap/scaffolding.html#gridSystemto learn more.
您必须将<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>
Also you do not close your <input>elements, which might yield undesired results. Finally I can't find any import of Bootstrap's CSS file. Hence, the styles for the grid systems are not available in your web page.
此外，您不会关闭<input>元素，这可能会产生不希望的结果。最后我找不到 Bootstrap 的 CSS 文件的任何导入。因此，网格系统的样式在您的网页中不可用。
Here is a working jsFiddle: http://jsfiddle.net/VTbAA/1/
这是一个有效的 jsFiddle：http: //jsfiddle.net/VTbAA/1/
Update (2nd Example)
更新（第二个例子）
Again, you are missing your CSS import. It works fine as soon as you add Bootstrap's CSS file. Note that you are also missing to close some <div>elements. Furthermore, Bootstrap provides a 12-based grid system. Hence your columns should add up to 12.
同样，您缺少 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>
The important line is the import statement:
重要的一行是导入语句：
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css">
