扩展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/