引導排全寬

好了，所以我使用的引導，我想與跨度3行，它看起來是這樣的：引導排全寬

<div id="container"> 
<div class="row"> 
    <div class="span3"> 
      <h5><b>Resources</b></h5> 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
    </div> 

    <div class="span3"> 
     <h5><b>Multiplayer</b></h5> 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
    </div> 
    <div class="span3"> 
     <h5><b>Create your own cards!</b></h5> 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
    </div> 
    <div class="span3"> 
     <h5><b>Default decks</b></h5> 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
    </div> 
    </div> 
    </div>

的問題是，雖然，跨度和行類請遵循容器的寬度，因此它始終是全寬度，所以不是在彼此旁邊列出，而只是堆疊，就像我僅使用4段落標籤而沒有其他東西。

我不知道它爲什麼這樣做，但我敢肯定，這是錯誤的，無論哪種方式，我該如何讓它的行爲應該如此？

來源

2013-10-01 Kevin Ferm

>是的，在twitter-bootstrap中所有的span class已經提到過顯示：block，所以如果你想要彼此相鄰的列表，請給span class顯示：inline-block –

你使用的是什麼版本的引導程序？ – JohnP

我正在使用bootstrap v3 –

是否使用引導3？

這是格式化大尺寸的格子，即桌面大小的窗口....試着改變你的類COL-LG-3

.COL-MD，.COL-SM，並.COL-XS是關於各種容器寬度...

 <div class="container"> 
      <div class="row"> 
      <div class="col-lg-3"> 
       <h5><b>Resources</b></h5> 
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
      </div> 

      <div class="col-lg-3"> 
       <h5><b>Multiplayer</b></h5> 
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
      </div> 
      <div class="col-lg-3"> 
       <h5><b>Create your own cards!</b></h5> 
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
      </div> 
      <div class="col-lg-3"> 
       <h5><b>Default decks</b></h5> 
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
      </div> 
      </div> 
     </div>

來源

2013-10-01 11:56:13

首先，我推薦使用Bootstrap3。有一些新的類具有用於響應式設計的Device-Dependencys。

所以，如果你想有一個3上校寬度僅DIV封裝這樣的：

<div id="container"> 
<div class="row"> 
<div class="span3">  
<div class="span12"> 
      <h5><b>Resources</b></h5> 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
    </div> 

    <div class="span12"> 
     <h5><b>Multiplayer</b></h5> 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
    </div> 
    <div class="span12"> 
     <h5><b>Create your own cards!</b></h5> 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
    </div> 
    <div class="span12"> 
     <h5><b>Default decks</b></h5> 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
    </div> 
    </div> 
    <div class="span9">right colomn</div> 
    </div> 
    </div>

如果不是你需要什麼，試圖更好地解釋您的需求。

如果您想顯示3個div，請將它們全部封裝到span12中。

來源

2013-10-01 11:41:32 suther

<!DOCTYPE html> 
<html> 

<style> 
.row > .span3 
{ 
    display: inline-block; 
    width: 20%; 
    margin: 0; 
    padding: 0; 
} 
</style> 

</head> 
<body> 
<div id="container"> 
<div class="row"> 
<div class="span3"> 
<h5><b>Resources</b></h5> 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh   euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
</div> 

<div class="span3"> 
<h5><b>Multiplayer</b></h5> 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
</div> 
<div class="span3"> 
    <h5><b>Create your own cards!</b></h5> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
</div> 
<div class="span3"> 
<h5><b>Default decks</b></h5> 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
</div> 
</div> 
</div> 
</body> 
</html>

希望這有助於

來源

2013-10-01 11:47:03

代替<div class="row">使用行流體利用動態寬度下<div class="row-fluid"> span類（百分比，而不是固定的像素）。

來源

2013-10-01 11:59:43 Leyu

回答

相關問題