2

Twitterのブートストラップを使用して設計されたWebページと、さまざまなウィンドウサイズですべてを応答できるようにするレスポンシブCSSインクルージョンがあります.しかし、次のコードの画像は、ブラウザのサイズが変更されたときにサイズが変更されないため、応答性を示していません

<div class="container-fluid">
    <div class="row-fluid">
    <div class="span"> <div class="media">
    <a href="http://facebook.com" target="_blank" class="media-link"><img class="mod-picture" src="images/picture.jpg" alt="post picture" /></a> <div class="media-container"><a class="link-name" href="#" target="_blank">media name</a></div>
    </div></div></div></div>

    In css file styles are - 
    .media-link
    {
            float:left;
        border:1px solid #ccc;
        display:inline-block;
        color:#3B5998;
        cursor:pointer; 
        margin-right:5px;
    }
    .mod-picture{
        margin-right:10px;
        border:0;
        display:block;
        margin:3px;
    }

しかし、float:left; を削除すると および display:inline-block; メディア リンク クラスのスタイルを使用すると、ブラウザー ウィンドウのサイズ変更時に画像のサイズが変更されます。 : リンクの前に div に残しましたが、失敗しました。提案してください。

4

3 に答える 3

2

ブートストラップ 3 を使用している場合は、クラス「img-responsive」を「img」タグに追加する必要がある場合があります。

于 2013-12-12T23:01:50.400 に答える