如何设置中间列内容的固定宽度？

Question

使用默认的hero unit示例我有一个自定义的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

尝试向左移动一个浮点数，并将中间列设置为具有width属性。您也可以将它们作为容器放入表中，然后将树td列设置为宽度。

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