0

Bootstrap フレームワークを使用しており、.span1 と .span3 div を取得して、モバイル ディメンションの上部に水平に配置しようとしています。ブラウザー ウィンドウがブレークポイント (782px) に達すると、画像の上端の配置と右側のテキストが消え、テキストが水平方向に中央揃えになり、画像の周りに回り込み始めます。

私は Stackoverflow を初めて使用し、提供するコードの量を判断するのに苦労しています。したがって、質問の作成方法に関するフィードバックは役に立ちます。: )

http://theplaybook.coの証言セクションで問題を確認できます。

.span1 には画像が含まれ、.span3 にはテキストが含まれます。HTMLは次のとおりです。

<div class="testimonials">
<div class="row-fluid">
<div class="span1"><img src="/img/tyler.jpg"></div>
<div class="span3">
<p>Just did a beta test of Playbook. I am super impressed."</p>
<p>—Tyler Tervooren</p>
</div>
</div>
</div>

およびCSS:

.testimonials img {
float: left;
}
4

2 に答える 2

1

float: noneより小さい画面のすべてのグリッド スパンのブートストラップ セット767px。span*Bootstrap の CSS の後に次のコードを追加することで、すべての要素または特定の要素のみの Bootstrap の規則を上書きできます。

@media (max-width: 767px) {
    .testimonials .row-fluid .controls-row [class*="span"] {
        float: left !important;
    }
}
于 2013-05-22T18:39:15.793 に答える