Question

好吧，所以我正在使用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个段落标签而没有其他

我不确定为什么会这样做，但我很确定这是错的，无论哪种方式，我怎么能让它像它应该那样行事？

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

Answer 2

首先，我建议使用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中。

Answer 3

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

希望这会有所帮助

Answer 4

而不是<div class="row">使用<div class="row-fluid"> 在行 - 流体下的span类使用动态宽度（百分比而不是固定像素）。

bootstrap行全宽

4 个答案: