0

LESS コードによって駆動される「レスポンシブ」な Bootstrap テーマをカスタマイズしようとしていますが、解決できない問題がいくつかあります。まず、コードを示します。

HTMLは次のとおりです。

<div class="row-fluid">
    <div class="span7">
        <div class="hero-unit">
            <h2 class="gw-tweak2">This is line 1.</h2>
            <h1 class="gw-tweak2">This is (big) line 2.</h1>
        </div>
    </div>
    <div class="gw-tweak3 span5">
        <img src="img/portrait-square-nobkgd-250sq.png" />
    </div>
</div>

関連するLESSコードは次のとおりです。

.hero-unit {
    background-color: @backgd-color;

    h2.gw-tweak2 {
        color: lighten(@subhead-color, 6%);
        font-size: 22px;
    }
    h1.gw-tweak2 {
        color: darken(@subhead-color, 8%);
        font-size: 44px;
    }
}

div.row-fluid>div.gw-tweak3 {    // gw: applies to the span4 div 
                                 //   that contains the portrait img
    float: left;
}

クラス "gw-tweak2" と "gw-tweak3" を使用してルールのセレクターを狭めることで、変更によって発生する可能性のある副作用を防止しようとしています。（参考までに、「gw-」があるので、変更をすぐに見つけることができます。）

HTML コードは、Web ページの水平方向のスライスを記述しています。左側は Bootstrap が「ヒーロー ユニット」と呼んでいるもの (書式設定されたテキスト ボックスと考えてください) で、右側は 250x250 ピクセルの写真です。

「レスポンシブ」とは、Web ページの幅が狭くなるにつれて、ページのさまざまな要素がサイズ変更および再配置されることを意味します。(この方法では、同じ Web ページがコンピューター、タブレット、およびスマートフォンで適切に表示されます。)

私が望む望ましい効果は次のとおりです (デスク コンピューターに最も適した Web ページ サイズの範囲内で): Web ページの幅が減少すると、ヒーロー ユニットの高さが増加します。これが起こっていると、画像が下に移動して、ヒーロー ユニットの高さに対して垂直方向の中央に配置されます。

実際に何が起こるかは次のとおりです。しばらくの間、画像の垂直位置は変更されません。その後、ある時点で画像が縮小し始め、同時にヒーロー ユニットの上部境界 (つまり、このコードで定義されている領域の始まり) を通る架空の水平線に向かってドリフトし始めます。

この問題に密接に関連していると思われる観察結果は次のとおりです。 Firebug を使用して、特定の HTML タグによって「カバーされている」領域を強調表示すると、「span7」領域 (ヒーロー ユニット) の高さと「span5」エリアが異なります。(私は、Bootstrap がそれらをすべて同じ高さにすると仮定しました。結局のところ、「行流体」divは Web ページの長方形のスライスを表しているようです。) また、Web ページが狭くなるにつれて、「span5」要素の領域収縮するにつれて、 を正確にカバーするimgように収縮します。

何もできないかもしれません。要素を垂直方向にセンタリングすることは、HTML が行うことではないという Web ページを見たことがあります。しかし、私が説明している方法で Bootstrap が動作している理由についての洞察でも、現在の動作を変更して、結果がそれほどひどいものにならないようにするのに役立つ可能性があります。

4

1 に答える 1

0

構造体が既に float に設定されているため、gw-tweak3 を定義する必要はありません。画像の横幅を100%にすればいいのに…

div.row-fluid > div.gw-tweak3 {   
    float: left; // Remove this
    img { 
      width:100%; margin:10px 0; vertical-align:middle;
    } // Add this
}
于 2013-03-29T07:00:53.890 に答える