javascript - ReactJS:错误的元素位置

Question

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

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

我正在尝试使用 Bootstrap ，但它无法正常工作:

我试图用 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 列，所以一切都应该有效。

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>