Twitter引导程序偏移无法正常工作

时间:2013-09-15 13:57:09

标签: twitter-bootstrap layout offset twitter-bootstrap-2

我已经阅读了所有主题,但我无法找到代码中的问题。

当我尝试将偏移量(或偏移*类div标签)放入流体网格系统时,我发现存在问题。基本上有2列有span2和span7类,然后我将span7列分成更多的列。要做到这一点,我将不得不使用偏移*因为我的设计之间有空格。但问题是,即使我使用偏移类我不能看到布局的任何差异。我将添加代码:

   <!--small column-->
    <div class="row-fluid">
      <div class="span2">
        <ul class="nav nav-list">
          <li class="nav-header">Available Electives</li>
          <li><a href="#">Dentist</a></li>
          <li><a href="#">Medical</a></li>
          <li><a href="#">Blah</a></li>
          <li><a href="#">And Blah</a></li>
        </ul>
      </div>

      <!--big column-->
      <div class="row-fluid">
        <div class="offset1"></div>
      <div class="span7">
        <h2>Join us!</h2>
        <p>What you do here will not only change the lives of people you help through this volunteer experience but also it willforever change your view on life as you know it. We promise you that the new places, cultures, cuisine and people you encounter will reward you with a whole new perspective in to life.
        Join with us and help to change a life; be it yours or someone else’s.
      </p>
      </div>
      <div class="span2">
        <img src="img/ceylonese-internship.jpg" class="thumbnail">
      </div>
    </div>
   </div>

我已经添加了所有必需的CSS文件,因为所有其他文件似乎都运行良好。 我正在本地服务器内测试该站点。

提前致谢!

1 个答案:

答案 0 :(得分:1)

因此,如果你提供一个jsfiddle或类似的东西,以最简单的形式显示你的问题,这对这些问题很有帮助。

在您的示例中,2.3.2网格系统的实现有点偏。基本的答案是,如果你想在现有的行流体中制作另一个行流体,你需要在span#内部跟随Bootstrap网格系统。此外,应在与span#。

相同的div上调用偏移量#

http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem(寻找流体嵌套)。

以下是嵌套的示例:

<div class="row-fluid">
  <div class="span8">
    Fluid 8
    <div class="row-fluid">
      <div class="span6">Fluid 6</div>
      <div class="span6">Fluid 6</div>
    </div>
  </div>
  <div class="span3 offset1">
    Fluid 3, Offset 1
  </div>
</div>

这是你所做的工作版本。请注意,它没有任何嵌套的行流体,但它们现在应该很容易添加。

http://jsfiddle.net/3VJdH/

相关问题