Bootstrap跨越跨度

Question

使用Twitter Bootstrap 2.3.5。

基本上，我的结构是左边有一个固定的侧边栏（span4），右边有一个主内容区域（span8，＃main）

在#main中，我放置了一个.hero-unit，然后是一行，应该包含两列，都是spam4。

以下是我的代码的缩短版本：

      
                   ...       

  <div class="span8 offset4" id="main">
            <div class="hero-unit">
             ....
            </div>

            <div class="span4" id="main-left">
                <article>
                    <h3>Head here</h3>
                    <p>Some Text here</p>
                </article>
            </div>

            <div class="span4" id="main-right">
                <article>
                    <h3>Head here</h3>
                    <p> Some Text Here</p>
                </article>
            </div>  
    </div>
</div>

我现在的问题是＃main-left和＃main-right现在放在容器外面。

我的代码似乎有什么问题？

Answer 1

减去您的ID和任何自定义类，这应该适合您：

<div class="container">
   <div class="row">
       <div class="span4">
           <p class="text-center"><img class="img-circle" src="http://placehold.it/100x100" /></p>
           <p>Look at this stuff, isn't it neat wouldn't you think my collection complete. Wouldn't you think Im a girl a girl who has everything.</p>
           <ul class="nav nav-tabs nav-stacked">
               <li><a href="#">Home</a></li>
               <li><a href="#">About Me</a></li>
               <li><a href="#">Contact</a></li>
           </ul>
       </div>
       <div class="span8">
           <div class="hero-unit">
               <h1>Hero Unit</h1>
           </div>
           <div class="row">
               <div class="span4">
                   <h3>Head here</h3>
                   <p>I've heard it said, that people come into our life...</p>
               </div>
               <div class="span4">
                   <h3>Head here</h3>
                   <p>Like a comet pulled from orbit as it passes the sun...</p>
               </div>
           </div>
       </div>
   </div>
</div>

View Demo Here

Answer 2

请参阅有关嵌套列和行的注释。但试试这个：

<div class="container">
<div class="row">
  <div class="span4">
    The sidebar content
  </div>
  <div class="span8" id="main">
    <div class="row">
      <div class="hero-unit">
        ....
      </div>
    </div>
    <div class="row">
      <div class="span4" id="main-left">
        <article>
          <h3>Head here</h3>
          <p>Some Text here</p>
        </article>
      </div>

      <div class="span4" id="main-right">
        <article>
          <h3>Head here</h3>
          <p> Some Text Here</p>
        </article>
      </div>  
    </div>
  </div>
</div>
</div>

Answer 3

可能这可以帮到你..

<div class="span8 offset4" id="main">       
    <div class="row-fluid">
        <div class="span12">
            <div class="hero-unit"> 
                .... 
            </div>
        </div>
    </div>
    <div class="row-fluid">
        <div class="span6" id="main-left">
            <article>
                <h3>Head here</h3>
                <p>Some Text here</p>
            </article>
        </div>
        <div class="span6" id="main-right">
            <article>
                <h3>Head here</h3>
                <p> Some Text Here</p>
            </article>
        </div>  
    </div> 
</div>