牌語備忘録 -pygo

あくまでもメモです。なるべくオフィシャルの情報を参照してください。

牌語備忘録 -pygo

Rails3 で twtter bootstrap と will_paginate を使うと表示が崩れる件

(環境: MacOSX10.7, ruby19.2, rails3.1.3, bootstrap-sass-rails1.4.0.3)

こんな感じにズレる


修正してみる

インストール

Gemfile(なんとなくbootstrap-sass-rails使ってみた)

gem 'bootstrap-sass-rails'

gem 'will_paginate', '~> 3.0'

gem 'i18n_generators'
rails g i18n ja

code

config/locales/translation_ja.yml

ja:
  will_paginate:
    next_label: Next →
    page_entries_info:
      multi_page: Displaying %{model} %{from} - %{to} of %{count} in total
      multi_page_html: Displaying %{model} <b>%{from}&nbsp;-&nbsp;%{to}</b> of <b>%{count}</b>
        in total
      single_page:
        one: Displaying 1 %{model}
        other: Displaying all %{count} %{model}
        zero: No %{model} found
      single_page_html:
        one: Displaying <b>1</b> %{model}
        other: Displaying <b>all&nbsp;%{count}</b> %{model}
        zero: No %{model} found
    page_gap: ! '&hellip;'
    previous_label: ! '&#8592; Prev'

application.css

/*
 *= require twitter/bootstrap
 */

span.previous_page.disabled,
em.current {
  border-bottom-width: 0px;
  border-left-width: 0px;
  border-right-color: rgba(0, 0, 0, 0.148438);
  border-right-style: solid;
  border-right-width: 1px;
  border-top-width: 0px;
  /* cursor: auto; */
  display: block;
  float: left;
  /* font-family: verdana, arial, helvetica, sans-serif; */
  /* font-size: 13px; */
  font-style: normal;
  /* font-weight: normal; */
  height: 33px;
  line-height: 33px;
  /* margin-bottom: 0px; */
  /* margin-left: 0px; */
  /* margin-right: 0px; */
  /* margin-top: 0px; */
  /* overflow-y: visible; */
  padding-bottom: 0px;
  padding-left: 13px;
  padding-right: 13px;
  padding-top: 0px;
  text-decoration: none;
}

span.previous_page.disabled {
  width: 55px;
}

em.current {
  background-color: #C7EEFE;
  /* background-color: lighten(@blue, 45%); */
  width: 10px;
}
こんなんなった

とりあえず

メモ

コメントで「kaminari」を教えてもらったのでやり直してみました。