1

Подскажите пожалуйста начинающему как сделать 2 кнопки чтобы выровнялись влево и вправо в одном ряду, а то у меня получается с переносом.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container pt-5">
  <form method="post">
    <div class="row pt-5">
      <div class="col-12 col-sm-10 col-md-8 col-lg-7 col-xl-5 mx-auto">
        <div class="text-danger">Клиент с номером не найден. Давайте попробуем поискать по ФИО!</div>
        <input type="text" name="inputFIO" id="inputFIO" class="form-control" aria-describedby="FIOHelpBlock">
        <p id="FIOHelpBlock" class="form-text text-muted">
          Введите фамилию и инициалы с которыми вы регистрировались в базе
        </p>
        <button type="submit" class="btn btn-primary" id="submit">Поиск</button>
        <button type="button" onclick="history.back();" class="btn btn-primary">Назад</button>
      </div>
    </div>
  </form>
</div>

Уже нагуглил все что только мог, не могу понять как сделать.

1 ответ 1

2

Например вот так.

.flex-box {
  display: flex;
  justify-content: space-between;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.4/css/bootstrap.css" rel="stylesheet"/>
<div class="container pt-5">
<form method="post">
        <div class="row pt-5">
            <div class="col-12 col-sm-10 col-md-8 col-lg-7 col-xl-5 mx-auto">
                <div class="text-danger">Клиент с номером не найден. Давайте попробуем поискать по ФИО!</div>
                <input type="text" name="inputFIO" id="inputFIO" class="form-control" aria-describedby="FIOHelpBlock" >
                <p id="FIOHelpBlock" class="form-text text-muted">
                Введите фамилию и инициалы с которыми вы регистрировались в базе
                </p>
                <div class="flex-box">
                  <button type="submit" class="btn btn-primary" id="submit">Поиск</button>
                  <button type="button" onclick="history.back();" class="btn btn-primary">Назад</button>
                </div>
                
            </div>
        </div>
    </form>
</div>

1
  • рад что помогло!!))))))) 21 мая 2018 в 8:17

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.