0

ブートストラップ 2.3.2を使用しています

ライトボックスアドオンでサムネイルを追加しました。ただ、サムネイルが枠からはみ出して変な感じ。 ここに画像の説明を入力 クラス「サムネイル」を削除すると、問題ないように見えます。ただし、現時点では、ライトボックスは機能しません。

私のコードは

<ul class="thumbnails" data-toggle="lightbox">
    <li class="span3"> 
        <a href="http://lorempixel.com/500/500/transport/1/" 
           title="Image #1" data-description="Lorem ipsum dolor" 
           class="thumbnail">
           <img src="http://lorempixel.com/250/250/transport/1/" alt="">
        </a>
    </li>
    <li class="span3"> 
        <a href="http://lorempixel.com/500/500/transport/2/" 
           title="Image #1" data-description="Lorem ipsum dolor" 
           class="thumbnail">
           <img src="http://lorempixel.com/250/250/transport/2/" alt="">
        </a>    
    </li>
    <li class="span3"> 
        <a href="http://lorempixel.com/500/500/transport/3/" 
           title="Image #1" data-description="Lorem ipsum dolor" 
           class="thumbnail">
           <img src="http://lorempixel.com/250/250/transport/3/" alt="">
        </a>    
    </li>
    <li class="span3"> 
        <a href="http://lorempixel.com/500/500/transport/4/" 
           title="Image #1" data-description="Lorem ipsum dolor" 
           class="thumbnail">
           <img src="http://lorempixel.com/250/250/transport/4/" alt="">
        </a>    
    </li>
    <li class="span3"> 
        <a href="http://lorempixel.com/500/500/transport/1/" 
           title="Image #1" data-description="Lorem ipsum dolor" 
           class="thumbnail">
           <img src="http://lorempixel.com/250/250/transport/1/" alt="">
        </a>
    </li>
    <li class="span3">
        <a href="http://lorempixel.com/500/500/transport/2/" 
           title="Image #1" data-description="Lorem ipsum dolor" 
           class="thumbnail">
           <img src="http://lorempixel.com/250/250/transport/2/" alt="">
       </a>    
    </li>
    <li class="span3"> 
        <a href="http://lorempixel.com/500/500/transport/3/" 
           title="Image #1" data-description="Lorem ipsum dolor" 
           class="thumbnail">
           <img src="http://lorempixel.com/250/250/transport/3/" alt="">
        </a>    
    </li>
    <li class="span3"> 
        <a href="http://lorempixel.com/500/500/transport/4/" 
           title="Image #1" data-description="Lorem ipsum dolor" 
           class="thumbnail">
           <img src="http://lorempixel.com/250/250/transport/4/" alt="">
        </a>    
    </li>
    <li class="span3"> 
        <a href="http://lorempixel.com/500/500/transport/1/" 
           title="Image #1" data-description="Lorem ipsum dolor" 
           class="thumbnail">
           <img src="http://lorempixel.com/250/250/transport/1/" alt="">
        </a>    
    </li>
    <li class="span3"> 
        <a href="http://lorempixel.com/500/500/transport/2/" 
           title="Image #1" data-description="Lorem ipsum dolor" 
           class="thumbnail">
           <img src="http://lorempixel.com/250/250/transport/2/" alt="">
        </a>    
    </li>
    <li class="span3"> 
        <a href="http://lorempixel.com/500/500/transport/3/" 
           title="Image #1" data-description="Lorem ipsum dolor" 
           class="thumbnail">
           <img src="http://lorempixel.com/250/250/transport/3/" alt="">
        </a>    
    </li>
    <li class="span3"> 
        <a href="http://lorempixel.com/500/500/transport/4/" 
           title="Image #1" data-description="Lorem ipsum dolor" 
           class="thumbnail">
           <img src="http://lorempixel.com/250/250/transport/4/" alt="">
        </a>    
    </li>
</ul>
4

1 に答える 1

0

私は開発者ツールを使用して IE11 であなたのサイトをいじっており、あなたの問題に対する答えを見つけたと思います。CSS スタイルのパディングの .main_content img は 0px に設定されています。デバッグに実際の CSS ファイルを使用していないため、別の要素からスタイルを継承することが原因である可能性があります。いずれにせよ、画像のパディングを 0 に設定すると、より良い状態になるはずです。左マージンと右マージンにまだわずかな違いがあるように見えます。

.main_content img {
    padding: 0px;
}

これにより、サムネイルギャラリーをフォーマットするためのより良い場所が得られることを願っています.

-乾杯

于 2013-10-19T21:56:02.597 に答える