React Bootstrap-将项目与一个单元格中的同一行对齐

问题描述

我是新来的反应者，我试图将DropDownButton（位置）和TextInput（小时）(Refer to here) 对齐到一个单元格中的同一行，而不创建新列。有没有一种方法可以在不更改表结构的情况下进行操作？谢谢！

这是我的代码。

                      <td>
                        <DropdownButton           
                          id="dropdown-basic-button" 
                          title={item.position}
                          type='button'
                        >
                          <Dropdown.Item as='button' type='button'><div onClick={(e) => this.handleChangeEC(e.target.textContent,item,'position')}>Position</div></Dropdown.Item>
                          <Dropdown.Item as='button' type='button'><div onClick={(e) => this.handleChangeEC(e.target.textContent,'position')}>PM</div></Dropdown.Item>
                          <Dropdown.Item as='button' type='button'><div onClick={(e) => this.handleChangeEC(e.target.textContent,'position')}>SA</div></Dropdown.Item>
                          <Dropdown.Item as='button' type='button'><div onClick={(e) => this.handleChangeEC(e.target.textContent,'position')}>AP</div></Dropdown.Item>
                          <Dropdown.Item as='button' type='button'><div onClick={(e) => this.handleChangeEC(e.target.textContent,'position')}>P</div></Dropdown.Item>
                        </DropdownButton>
                        <input
                          type="number"
                          name="workingHour"
                          value={item.workingHour}
                          onChange={(e) => this.handleChangeTM(e.target.value,e.target.name)}
                          className="form-control"
                          placeholder='Hour'
                          min='1'
                        />
                      </td>

解决方法

添加标签<div className='input-group>来包装所有内容。

  <td>

    **<div className='input-group'>**

    <DropdownButton           
      id="dropdown-basic-button" 
      title={item.position}
      type='button'
    >
      <Dropdown.Item as='button' type='button'><div onClick={(e) => this.handleChangeEC(e.target.textContent,item,'position')}>Position</div></Dropdown.Item>
      <Dropdown.Item as='button' type='button'><div onClick={(e) => this.handleChangeEC(e.target.textContent,'position')}>PM</div></Dropdown.Item>
      <Dropdown.Item as='button' type='button'><div onClick={(e) => this.handleChangeEC(e.target.textContent,'position')}>SA</div></Dropdown.Item>
      <Dropdown.Item as='button' type='button'><div onClick={(e) => this.handleChangeEC(e.target.textContent,'position')}>AP</div></Dropdown.Item>
      <Dropdown.Item as='button' type='button'><div onClick={(e) => this.handleChangeEC(e.target.textContent,'position')}>P</div></Dropdown.Item>
    </DropdownButton>
    <input
      type="number"
      name="workingHour"
      value={item.workingHour}
      onChange={(e) => this.handleChangeTM(e.target.value,e.target.name)}
      className="form-control"
      placeholder='Hour'
      min='1'
    />

    **</div>**

  </td>

react-bootstrap reactjs reactjs