Question

我正在失去理智，无论我做什么，我的布局都会做一些奇怪的事情。

我有一个简单的表单代码：

<div class="center jumbotron">
  <%= form_for(@user, url: signup_path) do |f| %>
        <%= render 'shared/error_messages' %>
        <%= f.label t(:email) %>
        <%= f.text_field :email, class: 'form-control' %>
        <%= f.label t(:password) %>
        <%= f.password_field :password, class: 'form-control' %>
        <%= f.label t(:first_name) %>
        <%= f.text_field :first_name, class: 'form-control' %>
        <%= f.label t(:last_name) %>
        <%= f.text_field :last_name, class: 'form-control' %>
        <%= f.label t(:student_id) %>
        <%= f.text_field :student_id, class: 'form-control' %>
        <%= f.submit t(:sign_up_button), class: 'btn btn-lg btn-primary' %>
  <% end %>
</div>

看起来像我想要做的就是将输入宽度减少到大约25％（或3个色调），同时保持响应式布局。

例如，当我尝试使用表单控件类将整个表单包装在div中时，然后使用行类包装div中的每个输入+标签，使用col-xs-3类包装另一个div，输入变为内联和缩放而不是将一个置于另一个之下。

Answer 1

我希望您可能正确地执行了此操作但是您需要为每个列提供一个偏移量，以便它们不会使每个列内联并使用行。请参阅此处的bootstrap文档：http://getbootstrap.com/css/#grid-offsetting

应该看起来像

<div class="row">
  <div class="col-md-6 col-md-offset-3">
    <%= f.label t(:email) %>
    <%= f.text_field :email, class: 'form-control' %>
  </div>
</div>

等...

Answer 2

您可以针对表单中的一个元素试用此代码

<div class="OneFormElement">
<div class="row">
<div Class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<%= f.label t(:email) %>
</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
 <%= f.text_field :email, class: 'form-control' %>
</div>
</div>
</div>

Answer 3

以下是Bootstrap文档的链接。 custom column sizing

从文档中： Bootstrap包括一个响应式移动第一流体网格系统，随着设备或视口大小的增加，可以适当地扩展到12列。它包括用于简单布局选项的预定义类，以及用于生成更多语义布局的强大混合。

您的代码可以按如下方式重写

<div class="center jumbotron">
    <%= form_for(@user, url: signup_path) do |f| %>
        <%= render 'shared/error_messages' %>
           <div class="row">
             <div class="col-md-3"> <!-- this can be changed as per your requirement -->
               <%= f.label t(:email) %>
               <%= f.text_field :email, class: 'form-control' %>
             </div>
             <div class="col-md-3"> 
               <%= f.label t(:password) %>
               <%= f.password_field :password, class: 'form-control' %>
             </div>
           </div>
           <%= f.submit t(:sign_up_button), class: 'btn btn-lg btn-primary' %>
    <% end %>
</div>

Answer 4

完整答案是@Kasunjith和@Stephen答案的结合。 @Kasunjith的答案给予了适当的安排，而@Stephen确保它对所有设备都有响应。

最终代码如下所示：

<div class="center jumbotron">
  <%= form_for(@user, url: signup_path) do |f| %>
        <%= render 'shared/error_messages' %>
        <div class="row">
          <div class="col-lg-4 col-lg-offset-4 col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-12">
            <%= f.label t(:email) %>
            <%= f.text_field :email, class: 'form-control' %>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-4 col-lg-offset-4 col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-12">
            <%= f.label t(:password) %>
            <%= f.password_field :password, class: 'form-control' %>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-4 col-lg-offset-4 col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-12">
            <%= f.label t(:first_name) %>
            <%= f.text_field :first_name, class: 'form-control' %>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-4 col-lg-offset-4 col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-12">
            <%= f.label t(:last_name) %>
            <%= f.text_field :last_name, class: 'form-control' %>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-4 col-lg-offset-4 col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-12">
            <%= f.label t(:student_id) %>
            <%= f.text_field :student_id, class: 'form-control' %>
          </div>
        </div>
        <%= f.submit t(:sign_up_button), class: 'btn btn-lg btn-primary' %>
  <% end %>
</div>

如何使用引导程序减小输入元素的宽度

4 个答案: