0

我正在使用 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>

编辑：要查看我在说什么，请检查shiftdd。我希望购买链接始终保持在其各自的海报下方（嗯，无论如何都要低至 840 像素）。

4

2 回答 2

0

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

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 上。

现在你的问题是两个按钮都从中心向外扩展，这就像将 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>

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

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

这回答了你的问题了吗？

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

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

于 2013-03-13T20:15:35.613 回答
0

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>

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

于 2013-03-13T20:17:31.860 回答