0

私は自分で設計したブートストラップテーマを持っています。非常に応答性が高く、画面サイズが縮小するとすぐに調整されますが、画像にJavaScript機能を追加してホバー時にオーバーレイを作成すると、小さなcssで画像の応答性が歪んでしまいました、縮小することはありません。オーバーレイをそのままにしておきたいのですが、応答性を維持するために誰かが助けてくれるかどうかお願いします....これは以下のhtmlコードスニペットで、いくつかのインラインスタイルシートです。デフォルトのスタイル シート

<div class="container marketing" style="padding-top: 20px;">
<div class="row">
    <div class="span8"> 
        <span class="label label-info">EXCLUSIVE</span>
        <img id="d1" src="img-data/underage-marriage/nigeria-underage-marriage.jpg">
        <div class="contenthover" style="margin-top:10%;">
            <div class="row-fluid text-center" style="border-bottom:1px #CCC dashed; padding-bottom:3%;">
                <div class="span8" style="border-right:1px #CCC dashed; padding-right: 2%;">
                    <h1 class="pull-right" style="border-bottom:1px #CCC dashed;"><img src="img/brainstorm.png"><b><i>discussion</i></b></h1>
                  <h1><small class="pull-right">Keep your language clean.</small></h1>
                </div>
                <div class="span4" style="padding-top:3%;">
                    <button type="button" class="btn btn-large btn-danger pull-left" data-loading-text="Loading...">View Article</button>
                </div>
            </div>
            </div>
          </div>
          <div class="span4"></div>
        </div>
    </div>

<!-- stylesheet -->
<style>
  .contenthover { padding:20px 20px 10px 20px; }
  .contenthover, .contenthover h3, contenthover a { color:#fff; }
  .contenthover h3,
  .contenthover p {
    margin:0 0 10px 0; line-height:1.4em; padding:0;
  }                    
</style>
4

2 に答える 2

1

クラス「row」を「row-fluid」に変更してみてください。

于 2013-08-11T20:33:05.760 に答える
1

このクラスを使用して、bootstrap.css ファイル (インラインなど) の後に配置するようにしてください (この Stackoverflow の質問を見たのを覚えています。この質問は、Twitter Bootstrap 3 でデフォルトで画像が応答しない場合に役立つかもしれません。使用していない場合Bootstrap 3.0、これはまだ役に立ちます。)

img {
      display: inline-block;
      height: auto;
      max-width: 100%;

}

または、このようなものを使用して、これらの画像に対して別のメディアクエリを作成する必要がある場合があります (たとえば)...

@media (max-width: 480px) {
}
于 2013-08-11T16:49:08.957 に答える