如何在反應中並排放置兩個輸入字段

Question

我有 3 個輸入字段，第一個我自己想要，但接下來的兩個我需要並排。 到目前為止，我嘗試將 className 行添加到需要並排的行中，但它們仍然顯示在彼此下方

 {pillTabs.selected === 4 && (
                <div>
                   <div className="row"> //need the ones in this div side by side
                   <Input
                    label="Name"
                    type="text"
                    placeholder="Enter name"
                    inputId="basicInput"
                    value={name}
                    onChange={e => this.setState({ name: e.target.value })}
                  ></Input>
                  <Input
                    label="Label"
                    type="text"
                    placeholder="Enter label"
                    inputId="basicInput"
                    value={name}
                    onChange={e => this.setState({ name: e.target.value })}
                  ></Input>
                   </div>
                </div>
                  )}

是否可以在不使用諸如引導程序之類的外部庫的情況下將它們並排放置？

Answer 1

您可以使用 CSS 中的flex ，例如：

.side-by-side {
  display: flex;
  flex-direction: row;
}

<div>
  <Input1 />
  <div className="side-by-side">
    <Input2 />
    <Input3 />
  </div>
</div>