Ruby on rails 如何在rails中使用引导将窗体居中

如何通过在rails中使用bootsrap来将数据集中。我有一个与患者相关的表单，我对它进行了新的调整，可能还会应用其他一些样式

<%= simple_form_for([@patient, @patient.reports.build]) do |f| %>
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <div class="form-control">
                    <div class="form-group">
                        <%= f.label :date %>
                    </div>
                    <div class="form-group">
                        <%= date_field(:report, :date) %>
                    </div>
                    <div class="form-group">
                        <%= f.label :report %>
                    </div>

                     <div class="form-group">
                        <%= text_area_tag(:report, "", size: "24x6") %>
                    </div>
                    <center><%= f.button :submit, :class => 'button_one'  %></center>
                </div>
        </div>
    </div>
<% end %>

'按钮'>

我对ruby on rails一无所知，但您可以使用引导网格系统来实现这一点： 将页面行划分为三个div 2+8+2，并将代码放在第二个div中，如下所示：

<div class="col-md-2"><div>

<div class="col-md-8">
<%= simple_form_for([@patient, @patient.reports.build]) do |f| %>
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <div class="form-control">
                    <div class="form-group">
                        <%= f.label :date %>
                    </div>
                    <div class="form-group">
                        <%= date_field(:report, :date) %>
                    </div>
                    <div class="form-group">
                        <%= f.label :report %>
                    </div>

                     <div class="form-group">
                        <%= text_area_tag(:report, "", size: "24x6") %>
                    </div>
                    <center><%= f.button :submit, :class => 'button_one'  %></center>
                </div>
        </div>
    </div>
<% end %>
<div>

<div class="col-md-2"><div>

'按钮'>

如果您使用col-md-6，您使用的是屏幕宽度的一半（除非屏幕很小或特别小，否则它将使用所有屏幕）。引导使用12列网格系统（col-md-12使用所有屏幕宽度）。为了使表格在col-md-6中居中，必须在左侧添加3列。您可以这样做：

<div class="col-md-6 col-md-offset-3">

如果窗体较小，则可以根据屏幕大小使用不同的大小：

<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">

这就产生了这个（在Boostrap 3中）

col-xs-12-超小型设备（电话，小于768px）

col-sm-10 col-sm-offset-1-小型设备（平板电脑、768px及以上）

col-md-8 col-md-offset-2-中型设备（台式机、992px及以上）

col-lg-6 col-lg-offset-3-大型设备（大型台式机，1200像素及以上）

注意

引导4已更改屏幕大小：

• xs：超小型设备（肖像手机，小于576px）

• sm：小型设备（景观手机、576px及以上）

• md：中型设备（平板电脑、768px及以上）

• lg：大型设备（台式机、992px及以上）

• xl：超大设备（大型台式机，1200像素及以上）

您可以添加

您的表单code

，然后再添加一个