<br> 标签在 React js 元素之间不起作用

Answer 1

新的使用方式

<br>

<br>

不起作用，你应该使用

<br />

，它也适用于 hr，

<hr>

不

<hr />

代码如下：

import React from 'react'

const App = () => {
  return (
    <div>
        {/* <br> */}
        <br />
    </div>
  )
}

export default App

这是您的代码：

function Main()
{
    return(
    <>
        <div className="d-flex justify-content-center">
            <label for="height" className="text-info bg-secondary display-6" style={{marginRight: "40px",height:"50px"}}>
                Your Height:
            </label>
            <input type="text" id="height" placeholder="Centemeters"></input>

             <br />
             
            <label  className="text-info bg-secondary display-6" for="weight">
               Your Weight   /*this statement is showing side by side with above ones*/
            </label>
            <input type="text" id="weight" placeholder="KG"></input>
        </div>
    </>
    );
}

Answer 2

那是因为你有display: flex;在容纳元素的容器上。

<div className="d-flex justify-content-center">