0

私はbootstrap3でdevise 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 に答える