Как поставить форму ReactJS-bootstrap и тег h1 рядом - PullRequest
Новая
       11

Как поставить форму ReactJS-bootstrap и тег h1 рядом

0 голосов
/ 05 июля 2018

Я хочу разместить мою FormGroup и мой тег h1 рядом друг с другом по горизонтали. Я пытался использовать display: inline-block и другие разные вещи, но безуспешно. Вот мой код .css: 

.testingForm {
  max-width: 320px;
}

.testingMore {
  text-align: left;
  float: right;
}

А вот код .js: 

<div className="testingForm">
  <FormGroup
    controlId="stuff"
    bsSize="large"
  >
    <ControlLabel>Stuff</ControlLabel>
    <FormControl
    />
  </FormGroup>
</div>
<div className="testingMore">
  <h1>Additional Stuff</h1>
</div>

1 Ответ

0 голосов
/ 05 июля 2018

Вы можете создать элемент, который обернет вашу форму и заголовок, и превратить его в flex контейнер с display:flex;

.form-wrapper {
  display: flex;
}

.testingForm {
  max-width: 320px;
}

h1 {
  margin-top: 0;
}
<div class="form-wrapper">
  <div className="testingForm">
    <form>
      Test: <input type="text"/>
    </form>
  </div>
  <div>
    <h1>Additional Stuff</h1>
  </div>
</div>
...