前提
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件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。