My bootstrap has conflicts with my css in React JS

Question

When I put the bootstrap link in <head></head> my style change without any reason.

Without bootstrap link:

With boostrap link:

Here the style of the header:

.headerStyle {
  background-color: black;
  flex-direction: row;
  justify-content: space-between;
  display: flex;
}

Here the header in React JS:

 <div className="headerStyle" style={{ height: 60 }}>

    <div style={{ flexDirection: 'row', display: 'flex' }}>
      <ButtonSection name="Home" path="/" />
      <ButtonSection name="About" path="/about" />
      <ButtonSection name="Contact Us" path="/contactUs" />
    </div>

    <div style={{ justifyContent: 'space-evenly', display: 'flex', alignItems: 'center' }}>
      <SignUpButton />
      <LoginButton />
    </div>
  </div>

Answer 1

Try and add align-items: 'center' to .headerStyle

.headerStyle {
   background-color: black;
   flex-direction: row;
   justify-content: space-between;
   display: flex;
   align-items: 'center'
 }

Answer 2

所以问题是<p></p>标签，没有任何其他解决方案，如果你想写一个文本只使用<div></div>而不是<p></p>

My bootstrap has conflicts with my css in React JS

Question

2 answers

solution1
0 2021-07-04 10:02:40

solution2
0 ACCPTED 2021-07-09 11:10:04

My bootstrap has conflicts with my css in React JS

Question

2 answers

solution1 0 2021-07-04 10:02:40

solution2 0 ACCPTED 2021-07-09 11:10:04

solution1
0 2021-07-04 10:02:40

solution2
0 ACCPTED 2021-07-09 11:10:04