0

好的，所以我正在使用 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 个段落标签，没有别的。

我不确定它为什么会这样做，但我很确定这是错误的，无论哪种方式，我如何让它表现得像它应该的那样？

4

4 回答 4

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>
于 2013-10-01T11:56:13.683 回答
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>

希望这可以帮助

于 2013-10-01T11:47:03.713 回答
0

首先，我推荐使用 Bootstrap3。有一些新的类具有响应式设计的设备依赖关系。

因此，如果您想要一个 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 中。

于 2013-10-01T11:41:32.000 回答
0

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

于 2013-10-01T11:59:43.027 回答