Перемещение полей формы влево на Bootstrap и Rails

Question

Я пытаюсь стилизовать свое веб-приложение с помощью начальной загрузки, но у меня возникла проблема с выравниванием формы.Я хочу, чтобы форма была выровнена по левому краю с текстом "New Shoe" и заголовком вверху страницы.

Я попытался создать контейнеры для каждого поля и возиться с col-md-4,но, похоже, ничего не работает.

Это мой код:

<div class="container">
  <div class="row justify-content-start">
    <div class="field">
      <div class="col-md-4">
        <%= form.label :sku %>
        <%= form.text_field :sku, class: "form-control"%>
      </div>
    </div>
  </div>

  <div class="row justify-content-start">
    <div class="field">
      <div class="col-md-4">
        <%= form.label :size %>
        <%= form.text_field :size, class: "form-control" %>
      </div>
    </div>
  </div>

  <div class="row justify-content-start">
    <div class="field">
      <div class="col-md-4">
        <%= form.label :quantity %>
        <%= form.number_field :quantity, class: "form-control" %>
      </div>
    </div>
  </div>

  <div class="row justify-content-start">
    <div class="field">
      <div class="col-md-4">
        <%= form.label :price %>
        <%= form.text_field :price, class: "form-control" %>
      </div>
    </div>
  </div>
</div>

Вот так выглядит моя страница:

Текущая веб-страница

Answer 1

Я предполагаю, что вы поместили частичную форму внутри .container, где заголовок находится за пределами этого контейнера.Так как классы контейнера и строки добавляют отступы и поля, я бы посоветовал вам удалить контейнер из формы и обернуть в него страницу new.

Также элементы управления boostrap должны находиться внутри <div class="form-group">

Что-то вроде:

#new.html.erb
<div class="container">
    <h1>New Shoe</h1>
    <%= render 'form', shoe: @shoe %>
    <%= link_to 'Back', shoes_path %>
</div>


#form partial
<div class="row">
    <div class="col-md-4">
        <div class="form-group">
            <%= form.label :sku %>
            <%= form.text_field :sku, class: "form-control"%>
        </div>
    </div>
</div>

Answer 2

Элемент .row в Bootstrap имеет левое и правое поля.Это может вызвать проблему с выравниванием, в зависимости от других элементов на странице.Добавление этого в ваши пользовательские таблицы стилей может работать:

.row {
  margin-right: 0;
  margin-left: 0;
}

Чтобы полностью понять, что происходит, было бы полезно, если бы вы могли предоставить код для всей формы, включая заголовок.