Bootstrap風格未正確應用

Question

我正在使用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> 

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/

注 - 這當然是不完整的，因爲寬度滾動條將在瀏覽器和設備之間切換。所以，你需要確保你動態獲取滾動條的寬度。我找到的第一個解決方案就是在這裏：如何獲得瀏覽器的滾動條大小？

希望有幫助！