引导卡对齐不正确

Question

我正在使用Bootstrap 4开发Rails应用程序。Bootstrap的card存在一些样式问题，我无法弄清。

原始

按下按钮后

我不知道为什么所有边距都在移动。

<% if @article.errors.any? %>
    <!-- Taken directly from bootstrap -->
    <div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
    <div class="card-header">Header</div>
    <div class="card-body">
        <h5 class="card-title">Primary card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
    </div>
<%end %>


<%= form_for @article do |f| %>

    <div class="form-group row">
        <%= f.label :title, class:"col-sm-2 col-form-label" %>
        <div class="col-sm-8">
            <%= f.text_field :title, class:"form-control", placeholder:"Title of Article" %>
        </div>
    </div>

    <div class="form-group row">
        <%= f.label :description, class:"col-sm-2 col-form-label" %>
        <div class="col-sm-8">
            <%= f.text_area :description, class:"form-control", placeholder:"Body of Article", rows:10 %>
        </div>
    </div>

  <div class="form-group row">
    <div class="col-sm-10 offset-sm-2">
      <%= f.submit class:"btn btn-primary" %>
    </div>
  </div>
<% end %>

<div class="text-center">
    [ <%= link_to "Cancel request and return to articles listing", articles_path %> ]
</div>
    <%# </div>
</div> %>

没有影响该页面的外部CSS。此页面是从我的部分呈现的：

<div class="container-fluid" style="width: 75%;margin-top: 100px;">

    <h1 class="text-center"> Create an article </h1>

    <%= render 'form'%>

</div>

当我通过Chrome开发者工具手动输入卡时，它会给我我想要的东西

Answer 1

更改：

<%= f.label :title, class:"col-sm-2 col-form-label" %>

到

        <div class="col-sm-2">
            <%= f.label :title, class:"col-form-label" %>
        </div>