简体   繁体   English

引导网格对齐问题

[英]Bootstrap Grid Alignment Issues

So I'm following a tutorial for RoR but I can't seem to get the alignment right.If I copy and paste the code for the tutorial, it will look like this 所以我正在关注RoR教程,但似乎无法正确对齐。如果我复制并粘贴该教程的代码,它将看起来像这样

Here is the code: 这是代码:

<div class="row">
<div class="col-md-6 col-md-offset-3">
<%= form_for(@user) do |f| %>

  <%= f.label :name %>
  <%= f.text_field :name %>

  <%= f.label :email %>
  <%= f.email_field :email %>

  <%= f.label :password %>
  <%= f.password_field :password %>

  <%= f.label :password_confirmation, "Confirmation" %>
  <%= f.password_field :password_confirmation %>

  <%= f.submit "Create my account", class: "btn btn-primary" %>
<% end %>

But if I put col-md-1, then it sort of works, looking like this 但是,如果我输入col-md-1,它就可以正常工作,看起来像这样

Is it possible to still use col-md-6 but have it properly aligned like the second photo? 是否仍可以使用col-md-6但像第二张照片一样正确对齐? I don't know what else to change other than the numbers. 除了数字,我不知道还有什么要改变的。

I am not able to test this right now but you may be able to change your first line of your form to: 我目前无法对此进行测试,但是您可以将表格的第一行更改为:

 <%= form_for @user, :html => {:class => "form-horizontal"} do |f| %>

This should add the html and css need to make the form horizontal: 这应该添加html和css来使表格水平:

 <form class="form-horizontal">

Some what like this example: https://jsfiddle.net/obp9x1yr/7/ 类似于以下示例: https : //jsfiddle.net/obp9x1yr/7/

This might be a good post to read for more information: Rails Bootstrap how to format form_for (width grid collapses) 这可能是阅读更多信息的好文章: Rails Bootstrap如何格式化form_for(宽度网格折叠)

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM