为什么 reactstrap 没有像 bootstrap 一样的行为？

Question

.backgroundImage {
    background: url("page_livraison1.png") , url("Route.png");
    height: 100vh;
    background-position: bottom;
    background-repeat: no-repeat;
}
.verticalNav {
	background-color: #000000BF;
	height:100vh;
}

<div class="verticalNav col-md-3"> </div>
<div class="backgroundImage col-md-9"> </div>

这是我在 bootstrap 中的代码，但是当我想在 react js 和 reactStrap 中做同样的事情时，我没有得到相同的结果...... 这是我的反应代码

import Background from '../img/page_livraison1.png';
import Background1 from '../img/route.png';

const bgImgStyle = {
  background: `url(${Background})`+','+`url(${Background1})`,
  backgroundRepeat: 'no-repeat',
  height:'100vh',
  backgroundPosition: 'bottom',
}
const sideBarStyle = {
  backgroundColor:'#000000BF',
  height:'100vh',
}

export default {sideBarStyle};
export default {bgImgStyle};

<Row>
  <Col lg="3" md="3" sm="5" xs="6"> 
    <SideBar /> 
  </Col>
  <Col lg="9" md="9" sm="7" xs="6"> 
     <BgImg /> 
  </Col>
</Row>

我不明白为什么结果不一样但是我做了完全相同的代码...

• https://i.stack.imgur.com/pG00P.png 这是在 reactstrap 中

和

• https://i.stack.imgur.com/DHVL2.png 这是在引导程序中

Answer 1

最后我找到了答案，问题是我有 2 个 Col，而在这 2 个 col 中我有 2 个 div，其样式就像背景图像和高度一样。 当我导入我的组件时，它是这样的。

<div class="col-md-3> 
<div style="background-color:"black"; height:"100vh";> </div>
</div> 
<div class="col-md-9>
<div style="background-image:".png"; height:"100vh";> </div>
</div>

正确的做法是

<div class="col-md-3" style="...."> </div>
<div class="col-md-9" style="...."> </div>

所以最后我认为它是相同的，但是两个带有大小列的 div 或两个带有 div 内部的 div 这些 div 不是一回事，这就是为什么它的行为不同但我不明白但我修复了它像这样。

谢谢