Question

我只是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>

有谁能告诉我我在哪里错了？我没有在我的网页上获得偏移保证金。

enter image description here

我使用了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>

而且我的页面没有边距或偏移量。这是截图： enter image description here 我无法指出问题所在。

Answer 1

初步答复

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

重要的一行是import语句：

<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css">

如何在twitter bootstrap中使用span和offset类

1 个答案:

初步答复

更新（第2个例子）