twitter-bootstrap - 扩展 Bootstrap 流体网格中的中间列

Question

我正在尝试在这里实现类似寻呼机的东西：

这是我的标记：

<div id="tour-marker-icon-container" class="pagination-centered row-fluid">

    <div class="span1">
        <button class="btn"><i class="icon-arrow-left"></i></button>
    </div>

    <div class="span6" id="current-marker-icon-page" data-page-id="1">
        @foreach (var markerIcon in Model)
        {
            <img src="@Url.Content(markerIcon.Path)" data-id="@markerIcon.Id" class="marker-icon"/>
        }
    </div>

    <div class="span1">
        <button class="btn"><i class="icon-arrow-right"></i></button>
    </div>
</div>

如何指定要扩展的中间列并仍然保持响应？它应该如下所示：

更新 ：

span10 现在似乎可以工作，但我正确的 div 不在其父级中。为什么会这样？

另外我想知道当我调整窗口大小时是否有办法让按钮保持在侧面。这是目前的情况。

Answer 1

假设您要占用整行...尝试更改：

<div class="span6" id="current-marker-icon-page" data-page-id="1">

到

<div class="span10" id="current-marker-icon-page" data-page-id="1">

有 12 列，所以 span1 + span10 + span1 会给你一共 span12

请参阅 jsFiddle：http: //jsfiddle.net/NzSCH/