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