2012-01-31
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} - %{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 %{count}</b> %{model}
zero: No %{model} found
page_gap: ! '…'
previous_label: ! '← 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」を教えてもらったのでやり直してみました。
トラックバック - http://d.hatena.ne.jp/CortYuming/20120131/p1
リンク元
- 7 http://www.google.co.jp/url?sa=t&rct=j&q=iphone4s 着うた&source=web&cd=1&ved=0CDUQFjAA&url=http://d.hatena.ne.jp/CortYuming/20111017/p1&ei=QvonT7mKHOLymAX4yY2vAw&usg=AFQjCNEALWwjVFLKXteKNlNw9KVogXrPXw&cad=rja
- 7 http://www.google.co.jp/url?sa=t&rct=j&q=iphone4s 着信音 &source=web&cd=4&ved=0CEUQFjAD&url=http://d.hatena.ne.jp/CortYuming/20111017/p1&ei=DPknT7zHLcOYiAfMlZXpAg&usg=AFQjCNEALWwjVFLKXteKNlNw9KVogXrPXw&sig2=6BewtrL8B62
- 6 http://search.yahoo.co.jp/search?p=iphone4s+着うた&search.x=1&fr=top_ga1_sa&tid=top_ga1_sa&ei=UTF-8&aq=0&oq=
- 6 http://www.google.co.jp/url?sa=t&rct=j&q=iphone4s+着信音+作成&source=web&cd=2&ved=0CDIQFjAB&url=http://d.hatena.ne.jp/CortYuming/20111017/p1&ei=XpIoT5LzDIyCmQWtv9HRAw&usg=AFQjCNEALWwjVFLKXteKNlNw9KVogXrPXw
- 6 http://www.google.com/search
- 5 http://www.google.co.jp/url?sa=t&rct=j&q=iphone4s メール&source=web&cd=7&sqi=2&ved=0CE8QFjAG&url=http://d.hatena.ne.jp/CortYuming/20111015/p1&ei=yesnT961CMyWmQXC0bDaAw&usg=AFQjCNEyYZF3NEIA9UtKE42lUVg93EHRdQ
- 5 http://www.google.co.jp/url?sa=t&rct=j&q=python assert&source=web&cd=1&sqi=2&ved=0CCQQFjAA&url=http://d.hatena.ne.jp/CortYuming/20081208/p3&ei=yYMoT523MI7ymAWF9qzPAw&usg=AFQjCNGfr0qXW2EC6PZY2g3LORAZIEfViA&sig2=iaYagnYBK1k32pI2dOeVTA
- 4 http://search.yahoo.co.jp/search?p=iphone4s 着うた 作り方&rs=1&aq=-1&ei=UTF-8&fr=top_ga1_sa
- 4 http://search.yahoo.co.jp/search?p=iphone4s+メール+文字&aq=-1&oq=&ei=UTF-8&fr=top_ga1_sa&x=wrt
- 4 http://search.yahoo.co.jp/search?p=iphone4s+着信音&aq=-1&oq=&ei=UTF-8&fr=sb-necctp_sa&x=wrt


