javascript - ReactJS：错误的元素位置

Question

我试图将 3 个元素放在一行中：

1. 标签“过滤日志”
2. 输入栏
3. 选择下拉菜单

我正在尝试使用引导程序，但它不能正常工作：

我正在尝试将它们与col-md班级定位：

<div className="search-audit-logs col-12">

  <h3 className="col-md-2" margin="normal">Filter logs:</h3>

  <TextField
    id="auditLogSearch"
    className="col-md-5"
    label="Search item"
    type="search"
    margin="normal"
    value={this.state.query}
    onChange={(event) => 
    this.setState({ query: event.target.value })
    }
  />

  <FormControl 
    className="col-md-5"
    margin="normal"  
  >
    ....
  </FormControl>
</div>

我做错了什么？总共有 12 列，所以一切都应该工作。

标签： javascriptcssreactjs

Answer 1

您需要一个带有类row和用途的包装器col-*

<div className="row search-audit-logs" >
   <div className="col-md-4">

   </div>
   <div className="col-md-4">

   </div>
   <div className="col-md-4">

   </div>
</div>