Bootstrap样式未正确应用

Question

我正在使用带有bootstrap3的设计宝石。我设计的页面采用水平和中心对齐的形式。但这里没有正确应用这种风格。我在这做什么错？

<div class="container">
  <div class="row">
    <div class="col-md-6 col-md-offset-3">
      <div class="panel panel-info">
        <div class="panel-heading">Sign in</div>
        <div class="panel-body">
          <%= simple_form_for(resource, :as => resource_name, :url => session_path(resource_name), :html => {:class => 'form-horizontal' },
            wrapper: :horizontal_form,
            wrapper_mappings: {
            boolean: :horizontal_boolean
            }) do |f| %>
            <div class="form-inputs">
              <%= f.input :email, required: false, autofocus: true %>
              <%= f.input :password, required: false %>
              <%= f.input :remember_me, inline_label: 'Yes, remember me', as: :boolean if devise_mapping.rememberable? %>
            </div>

            <div class="form-actions">
              <%= f.button :submit, "Sign in" %>
            </div>
          <% end %>

          <%= render "devise/shared/links" %>
        </div>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
main {
  background-color: #fff;
  margin-top: 51px;
  padding-bottom: 80px;
 width: 100%;
}
</style>

Answer 1

我不确定这是否是最好的解决方案，但是你可以轻松地向主体添加填充，当它被隐藏时，滚动条的宽度完全相同，这将消除滑动。以下代码是一个示例：

$('#thumbnailCarousel').mouseover(function() {
  $('body').css('overflow-y','hidden');
  $('body').css('padding-right', '17px');
});
$('#thumbnailCarousel').mouseleave(function() {
  $('body').css('overflow-y','scroll'),
  $('body').css('padding-right', '0px');
});

请参阅此工作：http://jsfiddle.net/2gkn9/1/

...动态滚动条宽度为：http://jsfiddle.net/2gkn9/2/

注意 - 这当然不完整，因为滚动条的宽度将在浏览器和设备之间发生变化。因此，您需要确保动态获得滚动条的宽度。我找到的第一个解决方案是：如何获得浏览器的滚动条大小？

希望有所帮助！