Html 引导卡对齐不正确

我正在使用Bootstrap4开发rails应用程序。Bootstrap的

卡

存在一些样式问题，我无法解决

原创

按下按钮后

我不知道为什么利润都在变动

<% 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开发者工具手动输入卡片时，它给了我想要的东西

更改：

到

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