Q&A
ありがとうございます。
変更してみたのですが、変化なしでした。。
前提
React.jsでBootstrapを使用して
レイアウトを作成しています。
実現したいこと
下記の画像のbox_switch(赤枠部分)部分をTopまで広げて
backgroundカラーを適用させたい
該当のソースコード
React.js
1<div className="container"> 2 <div className="row mx-auto text-center"> 3 <> 4 <div className="col-12"> 5 <div className="box_switch"> 6 <img className="" src={plugon_pic} /> 7 <p className="under_ic_switch_state">{item.state}</p> 8 </div> 9 </div> 10 </> 11 </div> 12</div>
App.css
1.box_switch { 2 position: relative; 3 background:#1E3E75; 4 padding:15px; 5 border-radius: 10px; 6 margin-bottom: 30px; 7 margin: 5px calc(50% - 50vw) 15px; 8 width: 100vw; 9}
単純なHTML, CSSを追記しました。
これでも上に空白ができます。。
index.html
1<!DOCTYPE html> 2<html> 3<head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <link rel="stylesheet" type="text/css" href="main.css" /> 6 <title>sample</title> 7 <link href="css/bootstrap.min.css" rel="stylesheet"> 8</head> 9<body> 10 <div class="container"> 11 <div class="row mx-auto text-center"> 12 <div class="col-3"> 13 <div class="box_switch"> 14 <p class="p">PPPPPPPPPPP</p> 15 </div> 16 </div> 17 </div> 18</body> 19</html>
main.css
1.p { 2 color: white; 3} 4.box_switch { 5 position: relative; 6 background:#1E3E75; 7 padding:15px; 8 margin-bottom: 30px; 9 margin: 0px calc(50% - 50vw) 15px; 10 width: 100vw; 11}
回答2件
0
自己解決
これで解決しました！
.container { margin-top: 0 !important; }
投稿2022/09/28 04:29
総合スコア172
0
margin: 5px calc(50% - 50vw) 15px;で、margin-topを5pxに設定しているのが原因では。
marginの設定値が３つの場合は、上 | 左右 | 下 になります。
margin: ０ calc(50% - 50vw) 15px; とすればどうでしょう。
投稿2022/09/27 10:48
総合スコア33106
回答へのコメント
提示のコードだけでは再現できないので、
コンパイル済みのHTMLとCSSで症状の再現できるコードを提示してください。
あるいは公開可能ならURLの提示でいいです。
ありがとうございます。↑に追記させていただきましたが、こちらで大丈夫でしょうか？
こちらで同じコードでサンプルを作成してみたけど再現しませんね。
bootstrap.min.css を main.css の前に移動させたらどうなりますか。
あと、.box_switch の親要素に col-3 (width: 25%;)を設定して、.box_switchには、それからはみ出す width: 100vw; を設定しているのは矛盾してませんか。
ありがとうございます。追記のコードで解決しました！
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。