twitter-bootstrap - 如何为中间列内容设置固定宽度？

Question

使用默认的英雄单元示例，我有一个自定义的 3 列布局：

<div class="container">
<div class="row">
<div class="span4"></div>
<div class="span4"></div>
<div class="span4"></div>
</div>
</div>

它显示为：

但我真的希望中间内容是一个固定的宽度......就像（剪切粘贴photoshop的文学内容）：

如何调整要修复的中间内容的大小？还对如何固定左右两侧感兴趣？

代码（bootstrap hero 默认示例中的库存较少）：

<div class="container">
<div class="row">
<div class="span4">
      <div class="row">
        <div class="span4">
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus.  cursus commodo, tortor ma</p>
          <p><a class="btn" href="#">View details &raquo;</a></p>
        </div>
        </div>
</div>
<div class="span4">
<div class="row"    >
      <div class="hero-unit">
        <h1>Hello, world!</h1>
        <p>This is a template for a simple marketing or informational website. </p>
        <p><a href="#" class="btn btn-primary btn-large">Learn more &raquo;</a></p>
      </div>
      </div>
</div>
<div class="span4">
      <div class="row">
        <div class="span4">
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus </p>
          <p><a class="btn" href="#">View details &raquo;</a></p>
        </div>
        </div>
</div>
</div>
</div>

Answer 1

只要跨度计数加起来为 12，您就可以随意调整它们的大小。您的屏幕截图看起来像 3:6:3 或 2:8:2：

3:6:3：

<div class="container">
  <div class="row">
    <div class="span3"></div>
    <div class="span6"></div>
    <div class="span3"></div>
  </div>
</div>

2:8:2：

<div class="container">
  <div class="row">
    <div class="span2"></div>
    <div class="span8"></div>
    <div class="span2"></div>
  </div>
</div>

Answer 2

尝试为所有左侧浮动，并将中间列设置为具有宽度属性。您也可以将它们作为容器放入表中，然后设置树 td 列的宽度。

我希望这是您所需要的，因为我不想占用响应空间...哈哈快乐编码。