Почему реактивный ремень не имеет такого же поведения, как бутстрап? - PullRequest
0 голосов
/ 01 мая 2018

.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>

Это мой код в начальной загрузке, но когда я хочу сделать то же самое в реагировать на js с помощью реакции, я не получаю тот же результат ... вот мой код в реакции

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>

Я не понимаю, почему результат не тот же, однако я сделал точно такой же код ...

и

1 Ответ

0 голосов
/ 01 мая 2018

Наконец-то я нашел ответ, проблема в том, что у меня было 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 не одно и то же, поэтому это было не то же самое, но я не понял, как бы я это ни исправил как это.

Спасибо

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...