引导排全宽

好了，所以我使用的引导，我想与跨度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

回答

相关问题