9

我只是 Twitter Bootstrap 的初学者。

我正在尝试通过使用类跨度和偏移来使用它的网格功能。

这是我的代码：

 <!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>

而且我的页面没有边距或偏移量。这是屏幕截图： 在此处输入图像描述我无法指出问题所在。

4

1 回答 1

9

初步答案

您必须将<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/

更新（第二个例子）

同样，您缺少 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">
于 2013-06-08T19:08:27.830 回答