Я работаю над приложением rails с Bootstrap 4. Существует некоторая проблема стиля с card
из 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 Инструменты разработчика, она дает мне то, что я хочу