引導程序跨度之間的具體寬度

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

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> 

公告你的抵消類。

Answer 2

如果我正確理解你，你希望中間的按鈕不允許左側或右側按鈕進入固定距離，並且在瀏覽器展開時不改變位置，這是否正確？如果是這樣，這是我所看到的是你的解決方案：

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> 

而且你的CSS之間的固定空間中心按鈕類將如下所示：

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

而且這將覆蓋左右空間，防止兩者都塌陷到中心div上。

現在你的問題是兩個按鈕都從中心向外擴展，就像在一個額外的div中包裝3個按鈕一樣簡單，並且在'排流式購買行'的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/