Twitter bootstrap 引导中跨距之间的特定宽度

我正在使用Bootstrap 2.3构建一个站点，其中包含一些基本的jQuery

我有3个购买按钮，都在各自的span2中。中间的buy保持居中，这正是我想要的，但buy left和right都会随着浏览器宽度的改变而移动

有没有办法使买东西的左右两边与中心保持固定的距离

此外，我需要将它们放在单独的跨中，因为jQuery需要这样做。（我正在使“左键购买”和“右键购买”按钮消失，并将中间的“左键购买”按钮保持在中间位置。）

---

编辑：要查看我在实际操作中所说的内容，请检查。我希望购买链接始终保持在其各自的海报下方（好吧，无论如何降低到840px）。

如果我理解正确，您希望中间按钮不允许左键或右键进入固定距离，也不允许在浏览器展开时更改位置，对吗？如果是这样，我认为这是您的解决方案：

1：给中间的div一个额外的类，在外部的左键和右键之间用一个固定的空格来分隔它的CSS

  <div class="row-fluid buy-row">
                <div class="span2 offset3"><a href="http://www.reddit.com" class="buy-left">Buy</a></div>
                <div class="span2 pagination-centered center-button"><a href="#" class="buy-center">Buy</a></div>
                <div class="span2 pagination-centered"><a href="http://www.soundcloud.com" class="buy-right">Buy</a></div> 
   </div>

这将覆盖左侧和右侧空间，防止两者都塌陷到中间div上

现在，您的问题是两个按钮都从中心向外扩展，这将非常简单，例如，将3个按钮包装在一个额外的div中，并在“row fluid buy row”的div内设置一个固定的宽度

<div class="row-fluid buy-row">
  <div class="fixed-buy"><!-- additional div wrap to create permanent unchanging width from center -->
                <div class="span2 offset3"><a href="http://www.reddit.com" class="buy-left">Buy</a></div>
                <div class="span2 pagination-centered"><a href="#" class="buy-center">Buy</a></div>
                <div class="span2 pagination-centered"><a href="http://www.soundcloud.com" class="buy-right">Buy</a></div> 
  </div><!-- end your new div -->
</div>

这回答了你的问题吗

可能需要为此固定位置设置其他媒体查询，或者您也可以按百分比或em进行设置

.center wrap{
文本对齐：居中；
溢出：隐藏；
}
.中心包裹。span2{
浮动：无；
显示：内联块；
左边距：15px；/*根据您的口味调整*/
宽度：100px；/*根据您的口味调整*/
}

---

请注意，我已经删除了您的偏移类

这是一半，是的。现在买的东西彼此保持固定的宽度，但它们根本不移动。我如何让中心也买中央的？目前它们都在左边。您是否尝试过用户Isherwood提供的上面的JSFIDLE？我可能误解了您的目标，因为JSFIDLE中的代码似乎实现了您所阐明的目标，但仍然没有解决问题。看这张照片来了解我。我希望这两个维度保持相等，而不是像现在这样不同。这给了我和我已经得到的结果一样的结果。如果调整JSFIDLE结果窗口的宽度，可以看到每个单击按钮之间的距离随着宽度的变化而变化。我希望中心按钮始终保持在中心位置。然后我想买左和右保持一个固定的宽度距离从中心。仍然不能解决问题。看这张照片来了解我。我希望这两个维度保持相等，而不是像现在这样不同。i、 imgur.com/jQgP7VU.png然后在.span2中添加一个固定宽度。这非常有效，非常感谢您的帮助！你介意把这个JSFIDLE添加到你的原始答案中，这样我就可以接受你的原始答案了吗？再次感谢你，你让我高兴极了！

.center-button{margin:0 15px 0;}

<div class="row-fluid buy-row">
  <div class="fixed-buy"><!-- additional div wrap to create permanent unchanging width from center -->
                <div class="span2 offset3"><a href="http://www.reddit.com" class="buy-left">Buy</a></div>
                <div class="span2 pagination-centered"><a href="#" class="buy-center">Buy</a></div>
                <div class="span2 pagination-centered"><a href="http://www.soundcloud.com" class="buy-right">Buy</a></div> 
  </div><!-- end your new div -->
</div>

.fixed-buy{width:450px} /* or whichever pixel width you prefer */

.center-wrap {
    text-align: center;
    overflow: hidden;
}
.center-wrap .span2 {
    float: none;
    display: inline-block;
    margin-left: 15px; /* adjust to your taste */
    width: 100px; /* adjust to your taste */
}

<div class="row-fluid buy-row">
    <div class="center-wrap">
        <div class="span2"><a href="http://www.reddit.com" class="buy-left">Click me</a>

        </div>
        <div class="span2 pagination-centered"><a href="#" class="buy-center">Click me</a>

        </div>
        <div class="span2 pagination-centered"><a href="http://www.soundcloud.com" class="buy-right">Click me</a>

        </div>
    </div>
</div>