一些HTML元素不以移动浏览器为中心，使用带引导程序的rails(Some HTML elements not centering on mobile browser using rails with

一些HTML元素不以移动浏览器为中心，使用带引导程序的rails(Some HTML elements not centering on mobile browser using rails with bootstrap)

我正在使用带有Rails的Twitter Bootstrap并尝试其响应式设计功能。我有两个HTML元素（下面的评论中引用的h1元素和表单）在移动设备上偏离中心。然而，当我缩小它时，它们在我的浏览器中居中（见截图）。我无法弄清楚如何确保元素在移动设备上居中。

我在视图中有以下代码：

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title><%= full_title(yield(:title)) %></title> <%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %> <%= javascript_include_tag "application", "data-turbolinks-track" => true %> <%= csrf_meta_tags %> </head> <body> <header class="navbar navbar-fixed-top navbar-inverse"> <div class="navbar-inner"> <div class="container"> <%= link_to "ReRide", root_path, id: "logo" %> <nav> <ul class="nav pull-right"> <li><%= link_to "Home", root_path %></li> <li><%= link_to "About", about_path %></li> </ul> </nav> </div> </div> </header> <div class="container"> <% flash.each do |key, value| %> <div class="alert alert-<%= key %>"><%= value %> <a class="close" data-dismiss="alert">×</a> </div> <% end %> <div class="center hero-unit"> <h1>Welcome to ReRide!</h1>  <p>Where selling a used bike is painless </p> <p> <%= simple_form_for @contact, :html => {:class => "form-inline"} do |f| %>  <%= f.input_field :email, placeholder: 'Email', label: false, input_html: { class: 'input-medium' } %> <%= f.input_field :potential_relationship, input_html: { class: 'input-medium' }, collection: Contact::RELATIONSHIP_CHOICES.invert, prompt: "I am a:", label: false%> <%= f.button :submit, 'Stay Informed', :class => 'btn btn-primary' %> <% end %> </p> </div> <footer class="footer"> <small> <a href="http://www.reridebikes.com/">ReRide Bikes</a> </small> </footer> </div> </body> </html>

CSS文件：

@import "bootstrap"; body { padding-top: 60px; } @import "bootstrap-responsive"; /*Everything below is overriding Bootsrap CSS*/ /* mixins, variables, etc. */ $grayMediumLight: #eaeaea; @mixin box_sizing { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /* universal */ html { overflow-y: scroll; width: auto; overflow-x: hidden; } body { width: auto; overflow-x: hidden; } section { overflow: auto; } textarea { resize: vertical; } .center { text-align: center; h1 { margin-bottom: 10px; } } /* typography */ h1, h2, h3, h4, h5, h6 { line-height: 1; } h1 { font-size: 3em; letter-spacing: -2px; margin-bottom: 30px; text-align: center; } h2 { font-size: 1.2em; letter-spacing: -1px; margin-bottom: 30px; text-align: center; font-weight: normal; color: $grayLight; } p { font-size: 1.1em; line-height: 1.7em; } /* footer */ footer { margin-top: 45px; padding-top: 5px; border-top: 1px solid $grayMediumLight; color: $grayLight; a { color: $gray; &:hover { color: $grayDarker; } } small { float: left; } ul { float: right; list-style: none; li { float: left; margin-left: 10px; } } } /* forms */ input, textarea, select, .uneditable-input { border: 1px solid #bbb; } input { height: auto !important; } #error_explanation { color: #f00; ul { list-style: none; margin: 0 0 18px 0; } } .field_with_errors { @extend .control-group; @extend .error; }

在缩小的broswer：

在iPhone上：

I am using Twitter Bootstrap with Rails and experimenting with its responsive design functionality. I have two HTML elements (the h1 element and form referenced in comments below) that are off-center on mobile devices. They are however centered in my browser when I shrink it (see screenshots). I cannot figure out how to ensure the elements are centered on mobile.

I have the following code in the view:

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title><%= full_title(yield(:title)) %></title> <%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %> <%= javascript_include_tag "application", "data-turbolinks-track" => true %> <%= csrf_meta_tags %> </head> <body> <header class="navbar navbar-fixed-top navbar-inverse"> <div class="navbar-inner"> <div class="container"> <%= link_to "ReRide", root_path, id: "logo" %> <nav> <ul class="nav pull-right"> <li><%= link_to "Home", root_path %></li> <li><%= link_to "About", about_path %></li> </ul> </nav> </div> </div> </header> <div class="container"> <% flash.each do |key, value| %> <div class="alert alert-<%= key %>"><%= value %> <a class="close" data-dismiss="alert">×</a> </div> <% end %> <div class="center hero-unit"> <h1>Welcome to ReRide!</h1>  <p>Where selling a used bike is painless </p> <p> <%= simple_form_for @contact, :html => {:class => "form-inline"} do |f| %>  <%= f.input_field :email, placeholder: 'Email', label: false, input_html: { class: 'input-medium' } %> <%= f.input_field :potential_relationship, input_html: { class: 'input-medium' }, collection: Contact::RELATIONSHIP_CHOICES.invert, prompt: "I am a:", label: false%> <%= f.button :submit, 'Stay Informed', :class => 'btn btn-primary' %> <% end %> </p> </div> <footer class="footer"> <small> <a href="http://www.reridebikes.com/">ReRide Bikes</a> </small> </footer> </div> </body> </html>

CSS file:

@import "bootstrap"; body { padding-top: 60px; } @import "bootstrap-responsive"; /*Everything below is overriding Bootsrap CSS*/ /* mixins, variables, etc. */ $grayMediumLight: #eaeaea; @mixin box_sizing { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /* universal */ html { overflow-y: scroll; width: auto; overflow-x: hidden; } body { width: auto; overflow-x: hidden; } section { overflow: auto; } textarea { resize: vertical; } .center { text-align: center; h1 { margin-bottom: 10px; } } /* typography */ h1, h2, h3, h4, h5, h6 { line-height: 1; } h1 { font-size: 3em; letter-spacing: -2px; margin-bottom: 30px; text-align: center; } h2 { font-size: 1.2em; letter-spacing: -1px; margin-bottom: 30px; text-align: center; font-weight: normal; color: $grayLight; } p { font-size: 1.1em; line-height: 1.7em; } /* footer */ footer { margin-top: 45px; padding-top: 5px; border-top: 1px solid $grayMediumLight; color: $grayLight; a { color: $gray; &:hover { color: $grayDarker; } } small { float: left; } ul { float: right; list-style: none; li { float: left; margin-left: 10px; } } } /* forms */ input, textarea, select, .uneditable-input { border: 1px solid #bbb; } input { height: auto !important; } #error_explanation { color: #f00; ul { list-style: none; margin: 0 0 18px 0; } } .field_with_errors { @extend .control-group; @extend .error; }

In shrunken broswer:

On iPhone: