为什么我的来自React-Bootstrap的嵌套Col不能正确显示？

Question

问题：

我已将React-Bootstrap中的两个Col嵌套在另一个<Col>中，如下所示：

<Row className="show-grid" style={styles.container}>
  <Col md={2} xs={2}>
    My Rooms
  </Col>
  <Col md={2} xs={2}>
    Todos
  </Col>
  <Col md={2} xs={2}>
    Images
  </Col>
  <Col md={5} xs={5}>
    <Row>
      <Col md={1} xs={1}>
        <FontAwesomeIcon icon={faSearch} />
      </Col>

      <Col md={11} xs={11}>
        <FormControl placeholder="Search" />
      </Col>
    </Row>
  </Col>

  <Col md={1} xs={1} align="center" className="pull-right">
    {props.user ? (
      <Link to="/" onClick={props.logoutUser}>
        Logout
      </Link>
    ) : (
      <Link to="/signup">Sign Up</Link>
    )}
  </Col>
  {/* TODO: Create a Sign In Form that handles Signing In Users */}
</Row>

我要说的是这条线：

<Col md={5} xs={5}>
    <Row>
      <Col md={1} xs={1}>
        <FontAwesomeIcon icon={faSearch} />
      </Col>

      <Col md={11} xs={11}>
        <FormControl placeholder="Search" />
      </Col>
    </Row>
  </Col>

我认为这将显示一个导航栏。占据md={11} xs={11}空格的导航项是一个小的搜索栏。我假设它有一个搜索图标，其余的提醒空间是文本输入。

但不是。看起来像这样：

因此，输入位于React-Fontawesome中的搜索图标下方，而不是彼此相邻。

到目前为止，我尝试了什么？

我已经将图标和输入col包裹到另一组<Row>标签中。但这并没有任何改变。我尝试使用inline进行一些手动样式设置，但没有任何改变。

我在做什么错？有什么问题吗？