Question

我正在使用Bootstrap 2.3构建一个站点，响应一些基本的jQuery。

我有3个购买按钮，所有按钮都在他们自己的span2中。中间购买保持居中，这是我想要的，但左右购买都随着浏览器宽度的变化而移动。

有没有办法让买左和右离中心一定距离？

另外，我需要它们在不同的跨度中，因为jQuery需要它。（我正在购买左右按钮消失，并且在不同的跨度中保持中间购买中心。）

             <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"><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>

编辑：要查看我正在谈论的内容，请查看shifteddd。我希望购买链接始终保持在他们各自的海报下面（反过来，低至840px）。

Answer 1

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

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>

.center-button类的CSS将如下所示：

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

这将覆盖左右空间，防止两者都折叠到中心div上。

现在你的问题是两个按钮都从中心扩展，这就像在另一个div中包裹3个按钮一样简单，并在'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>

然后将div设置为您希望不超过的所需像素，使其既不会超出中心也不会折叠到其上

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

这会回答你的问题吗？

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

进行设置

http://www.w3.org/TR/css3-mediaqueries/

Answer 2

http://jsfiddle.net/fHDxk/4

.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>

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

引导程序中跨距之间的特定宽度

2 个答案: