跨度範圍內的引導程序跨度

使用Twitter引導程序2.3.5。跨度範圍內的引導程序跨度

嗯，基本上，我的結構是，我在左邊（span4）固定側邊欄和主要內容區右側（span8，#main）

在#main我已經把一個.hero-單位和之後，應該包含兩列，兩個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>

我現在的問題是，＃主左和主＃右現在被置於在容器外面。 enter image description here

什麼似乎是我的代碼的問題？

來源

2014-02-14 gelolopez

看起來你的「head here」塊位於'.span8'容器之外。如果你可以發佈一個有用的小提琴。 – dward

您需要在BS 2.3中嵌套時使用行 - http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem – Alwayslearning

您是否試圖完成此操作？ http://jsfiddle.net/SXVHm/1/ – dward

減掉你的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

來源

2014-02-14 14:30:34 dward

查看有關嵌套列和行的註釋。不過，試試這個：

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

來源

2014-02-14 14:19:35 Alwayslearning

不幸的是你的代碼不正確。注意水平滾動條：thehttp：//jsfiddle.net/SXVHm/2/ – dward

行流體修復。請參閱http://jsfiddle.net/SXVHm/3/（更新後的答案） – Alwayslearning

僅供參考，您不必在此處使用'.row-fluid'，'.row-fluid'不會讓它響應出門。它使容器和內容基於％。 [這個小提琴]（http://jsfiddle.net/SXVHm/4/）沒有使用'.row-fluid'，它仍然是響應式的。 '.row-fluid'是基於％的，而不是固定寬度的數字。根據BS 2.3.x文檔，'.row'和相應的'.spanX'類基於固定寬度數。爲了使您的網站響應，您需要將響應式樣式表包含在覈心之後。 – dward

可能這可以幫助你..

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

來源

2014-02-14 14:25:30 Mak

跨度範圍內的引導程序跨度

回答

相關問題