我想消除bootstrap中容器下的空白区域

Question

我想将下图中的box_switch （红框部分）部分扩展到顶部并应用背景色。

反应.js

<div className="container">
    <div className="row mx-auto text-center">
      <>
          <div className="col-12">
            <div className="box_switch">
                <img className="" src={plugon_pic} />
              <p className="under_ic_switch_state">{item.state}</p>
            </div>
          </div>
      </>
    </div>
</div>
      

申请.css

.box_switch {
    position: relative;
    background:#1E3E75; 
    padding:15px;
    border-radius: 10px;
    margin-bottom: 30px;
    margin: ０ calc(50% - 50vw) 15px;
    width: 100vw;
}

 .box_switch { position: relative; background: #1E3E75; padding: 15px; border-radius: 10px; margin-bottom: 30px; margin: ０ calc(50% - 50vw) 15px; width: 100vw; }

 <div class="container"> <div class="row mx-auto text-center"> <div class="col-12"> <div class="box_switch"> <img class="" src="https://via.placeholder.com/100" /> <p class="under_ic_switch_state">{item.state}</p> </div> </div> </div> </div>

Answer 1

那么我认为这会做

 body { margin: 0; padding: 0; }.box_switch { position: absolute; left: 0; top: 0; background:#1E3E75; padding:15px; border-radius: 10px; margin-bottom: 30px; margin: ０ calc(50% - 50vw) 15px; width: 100%; }.container { position: relative; }

Answer 2

这有效

.container {
  margin-top: 0 !important;
}