Twitter bootstrap 如何使用引导在英雄单位中显示两列？

我试图让bootstrap的行在英雄单位内工作。我对这个例子感到厌倦，但它似乎不起作用。我在《英雄》中只有一列。我的猜测是，填充导致列换行，因为在将填充设置为0时，它似乎正确对齐，但我不确定如何正确解决这一问题

<div class="hero-unit" style="padding: 15px;">
    <div class="page-header">
        <h2>
            Example Page Header
            <small>Example Sub Header</small>
        </h2>
    </div>

    <div class="row">
        <div class="span4">
            <img src="http://placehold.it/360x268" alt="">
        </div>

        <div class="span8">
            test
        </div>
    </div>
</div>

示例页眉
示例子标题
测试

Alex

如果您使用的是bootstrap-responsive.css或流体模板，则应用以下标记

  <div class="hero-unit">
    <div class="row-fluid">
        <div class="columnA pull-left">
             <h2>Column A</h2>
            <img src="http://placehold.it/500x300.png"/>
        </div>

        <div class="columnB pull-right">
             <h2>Column B</h2>
            <img src="http://placehold.it/500x300.png"/>
        </div>

    </div>
  </div>

上述代码应输出与下图类似的文件：

---

您可以使用总计为11（而不是12）的跨距。不需要额外的css：

<div class="hero-unit">
    <div class="row">
        <div class="span8"> column A </div>
        <div class="span3"> column B </div>
    </div>
</div>

A列
B栏

您是否可以添加一个示例图像，即使使用了您喜欢的页面画法？是否有理由不使用跨距？我认为跨距通常是将信息拆分为列的方式。不确定。我在工作中也遇到了类似的情况，只是使用了

row fluid

，仅此而已。当我使用row fluid时，这比Gary接受的答案更有效。在接受的答案中，Gary已经在CSS中定义了宽度-这些都没有效果。向左拉和向右拉有效地将英雄一分为二。如果需要列的宽度不同，请使用上面amirnissim的答案。

<div class="hero-unit">
    <div class="row">
        <div class="span8"> column A </div>
        <div class="span3"> column B </div>
    </div>
</div>