好吧，所以我正在使用Bootstrap，我想要一个跨度为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>
问题是，span和row类遵循容器的宽度，所以它总是全宽，所以不是在彼此旁边列出，它只是堆栈，就像我只使用了4个段落标签而没有其他
我不确定为什么会这样做，但我很确定这是错的，无论哪种方式，我怎么能让它像它应该那样行事？
答案 0 :(得分：1)
您使用的是Bootstrap 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>
答案 1 :(得分：0)
首先，我建议使用Bootstrap3。 有些新的类具有响应式设计的Device-Dependencys。
因此，如果你想要一个3 Col宽度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中。
答案 2 :(得分：0)
<!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>
希望这会有所帮助
答案 3 :(得分：0)
而不是<div class="row">使用<div class="row-fluid">
在行 - 流体下的span类使用动态宽度（百分比而不是固定像素）。