Почему мои вложенные столбцы из React-Bootstrap отображаются неправильно? - PullRequest
Новая
       15

Почему мои вложенные столбцы из React-Bootstrap отображаются неправильно?

0 голосов
/ 29 октября 2018

Проблема:

Я вложил 2 кола из React-Bootstrap внутрь другого <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}, представляет собой небольшую панель поиска. Я бы предположил, что у него есть значок поиска, а остальная часть места для напоминания - текстовый ввод

Но это не так. Вот как это выглядит:

enter image description here

Таким образом, ввод находится под значком поиска от React-Fontawesome, а не рядом друг с другом.

Что я пробовал до сих пор?

Я обернул значок и столбцы ввода в другой набор <Row> тегов. Но это ничего не меняет. Я попытался применить ручную стилизацию с inline, но это ничего не меняет.

Что я делаю не так? В чем проблема?

...