在 Bootstrap 和 Rails 上向左移动表单框答案

【问题标题】：Moving form boxes to the left on Bootstrap and Rails在 Bootstrap 和 Rails 上向左移动表单框
【发布时间】：2019-02-10 09:12:35
【问题描述】：

我正在尝试使用引导程序对我的 Web 应用程序进行样式化，但我的表单存在对齐问题。我希望表单与页面顶部的“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>

这是我的页面当前的样子：

Current Webpage

【问题讨论】：

检查嵌套框之间是否有一些填充或边距，使用一些浏览器开发工具检查页面以找出它。标头不在您的 sn-p 中。

标签： ruby-on-rails twitter-bootstrap

【解决方案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>

【讨论】：

【解决方案2】：

Bootstrap 中的 .row 元素有左右边距。它可能会导致此对齐问题，具体取决于页面上的其他元素。将此添加到您的自定义样式表中可能会起作用：

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

要完全了解发生了什么，如果您能提供整个表单的代码，包括标题，将会有所帮助。

【讨论】：