如何使用bootstrap在rails中居中表单

Question

如何在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 %>

Answer 1

我对ruby-on-rails一无所知，但你可以使用bootstrap网格系统来做到这一点： 通过将页面行划分为三个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>

Answer 2

如果你使用col-md-6，你使用的是屏幕宽度的一半（除非屏幕很小或超小，它会使用所有屏幕）。 Bootstrap使用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 - 小型设备（平板电脑，768像素及以上）

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

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

注意

Bootstrap 4改变了屏幕尺寸：

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

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

• md：中型设备（平板电脑，768像素及以上）

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

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