Можно ли добавить смещение справа с помощью начальной загрузки 4?

Question

Используя систему макетов Bootstrap 4, могу ли я выровнять свою кнопку по текстовому полю?

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row justify-content-center mb-4">
  <div class="col col-4">
    <input type="text"/>
  </div>
  <div class="col col-4">
    <input type="text"/>
  </div>
</div>
<div class="row justify-content-center mb-4">
  <div class="col">
  <input type="button" class="btn" value="Go"/>
  </div>
</div>
  

Я знаю, что могу держать все внутри одной строки и выровнять кнопку под текстовым полем ... но тогда мне нужно отрегулировать расстояние между ними, используя новый класс CSS... Я искал более чистое решение, используя существующие классы начальной загрузки 4 .

Answer 1

Похоже, вы хотите пространство между столбцами.Вы можете уменьшить ширину (столбец-3) входных столбцов и использовать смещение для 2-го столбца ...

<div class="container-fluid">
    <div class="row justify-content-center mb-4">
        <div class="col-3">
            <input class="mx-auto form-control" type="text">
        </div>
        <div class="offset-1 col-3 text-center">
            <input class="mx-auto form-control" type="text">
        </div>
    </div>
    <div class="row justify-content-center mb-4">
        <div class="col-7 text-right">
            <input type="button" class="btn" value="Go">
        </div>
    </div>
</div>

https://www.codeply.com/go/S33dvwVZxv

Answer 2

Используйте систему сетки форм.Добавьте класс .form-row после тега формы.Тогда очень легко выровнять кнопку правильно

Answer 3

Если в одной строке размещено более 12 столбцов, каждая группа дополнительных столбцов, как один блок, переносится на новую строку.- Bootstrap

Используйте col-8 text-right для столбца кнопки.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row justify-content-center">
    <div class="col-4 ">
      <input type="text" class="form-control" />
    </div>
    <div class="col-4 ">
      <input type="text" class="form-control" />
    </div>
    <div class="col-8  text-right">
      <button type="button" class="btn btn-primary mt-4">Go</button>
    </div>
  </div>
</div>

Answer 4

Я бы сделал так, наверное.

input {
  width: 100%
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row justify-content-center mb-4">
  <div class="col col-4">
    <input type="text" />
  </div>
  <div class="col col-4">
    <input type="text" />
  </div>
</div>
<div class="row justify-content-center mb-4">
  <div class="col-8 d-flex justify-content-end">
    <button type="button" class="btn">Go</button>
  </div>
</div>