0

Twitter Bootstrap を使用してページを作成しています。画像ギャラリーを表示するには、次のようなセットアップを使用します。

<div class="container">
    <div class="row">
        <div class="span1">
            <a href="#">
                <img src="http://www.placehold.it/50x50" />
            </a>
        </div><!-- /.span -->
        <div class="span1">
            <a href="#">
                <img src="http://www.placehold.it/50x50" />
            </a>
        </div><!-- /.span -->
        <div class="span1">
            <a href="#">
                <img src="http://www.placehold.it/50x50" />
            </a>
        </div><!-- /.span -->
    </div><!-- /.row -->
</div><!-- /.container -->

フィドル

今、これらの画像にある種のポラロイド効果が欲しい. これを行うには、 andphotoを保持するクラスを追加します。このような：aimg

<div class="span1">
    <div class="photo">
        <a href="#">
            <img src="http://www.placehold.it/50x50" />
        </a>
    </div>
</div><!-- /.span -->

フィドル

ご覧のとおり、このクラスを追加すると、グリッドが何らかの形でシフトします。そのため、グリッドが中央に配置されなくなりました。これを修正するためにできることはありますか?

spanが を取得しbackground-color、画像が の中央に配置されるのが最適spanです。パディングを使用すると、境界線の幅を制御できると思います-これは最初のアイデアですが、機能していません。このような効果をどのように作成しますか。a を使用するborder-iageと、グリッドもシフトします。

いくつかのスクリーンショットを追加しました:

ここで最初の例 - 視覚的に中央揃え 例 1

そして2番目の例 - 明らかにシフト 例 2

4

1 に答える 1

0

問題を解決しました。widthに追加したことを忘れましheightた.photo。これらの値を削除すると、正常に機能します。

于 2012-07-24T00:49:26.950 に答える