0

我正在使用带有 bootstrap3 的设计 gem。我设计了我的页面，表格水平和中心对齐。但是这里的样式没有正确应用。我在这里犯了什么错误？

<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>

图片

4

1 回答 1

0

我不确定这是否是最好的解决方案，但您可以轻松地将填充添加到与滚动条的宽度完全相同的正文中，而滚动条被隐藏，这将消除滑动。以下代码是一个示例：

$('#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/

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

希望有帮助！

于 2014-05-22T13:13:03.700 回答