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>

編集：私が実際に話していることを確認するには、shiftedddを確認してください。購入リンクを常にそれぞれのポスターの下に置いておきたい（とにかく840pxまで）。

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 に答える