ブートストラップ4のページの1/3の背景色を設定します。

Boostrap 4（alpha 5）でデザインを作成し、画面の1/3を背景色がピンク色にするようにしています。背景色は、右の列の左余白から右端まで伸びていなければなりません。ブートストラップ4のページの1/3の背景色を設定します。

誰もがこれを行うための最善の方法のいずれかrecommandationsを持っています：結果はビットのようにすべきですか？

2016-11-14 Ole Kristian Losvik

あなたは線形勾配で再生する必要がありますが、メディアは、ご提案のための – tmg

vwを使用して設定された幅の背景でdivを使用することができます。これはviewport widthです。例えば

：あなたはこのために背景にグラデーションを使用する場合、どのよう

.background{ 
    z-index: -1; // prevent "background" from covering anything 
    width: 33vw; //give background width of one third of page 
    height: 100%; 
    position: fixed; /* or absolute? I don't know what will be better for you */ 
    right: 0; /* stick to the right side */ 
    background-color: pink; 
}

出典

2016-11-14 22:48:30

感謝を照会します。それは正しい方向（少なくとも位置：絶対）で少しですが、頭痛のビットを与えますが、小さな画面で縮小するとうまく見えません。 –

なぜそれは悪く見えるのですか？画面サイズに関係なく常に画面幅の33％を占める必要があります。私は小さなタイプミスをしていました.33の後にスペースはないはずです。 –

？この例を参照してください：

body { 
 
    background: linear-gradient(
 
    to right, 
 
    lightgrey 0%, 
 
    lightgrey 70%, 
 
    hotpink 70%, 
 
    hotpink 100% 
 
); 
 
}

your code

出典

2016-11-14 23:02:05

これはうまくいくかもしれませんが、私はレイアウトのためにブートストラップクラスを使うことを考えていました。 –

私は必要な部分を抽出しました。 –

ここでの問題は小さい画面では、画面の1/3に背景がまだピンク色になっているため、md以上でうまく動作しても、小さなモバイル画面ではうまく動作しません。おそらくメディアクエリも必要でしょうか？ –

ブートストラップ4のページの1/3の背景色を設定します。

答えて

関連する問題