【Bootstrap】ページネーションのcssデザインがおかしい

解決したいこと

丸くするためのborder-radiusが片方しか反応しない。
背景の色を変えたいが、background-colorが反応しない。

参考にしたページ

https://qiita.com/rio_threehouse/items/313824b90a31268b0074

上記のページを参考にしてページネーションを導入しました。
デザイン変更のcssは、コピペしてもうまくいかなかったので、変更しています。

各ファイルの記述

css
1ul.pagination li a {
2  border-radius: 50%;
3  border: none;
4  background-color: #F9F8F4;
5  margin: 0 3px;
6}
7
8ul.pagination li a.active {
9  border-radius: 50%;
10  background-color: black;
11  color: white;
12  border: none;
13  
14}

html
1<div class="page" >
2  <%= paginate @rooads %>
3 </div >

検証

Lhankor_Mhy

2021/10/04 04:34

HTMLをご提示ください。

mokosamejima

2021/10/04 08:12

了解しました！編集しておりますので、再度ご確認のほどお願いします！

Lhankor_Mhy

2021/10/04 08:20

拝見しました。問題を把握しました。

行動規範の内容に同意します

回答1件

ベストアンサー

ul.pagination li a.activeという要素がないのが原因のように見えます。
HTMLのスクリーンショットを拝見する限り、ul.pagination li.active aの間違いではありませんか。

投稿2021/10/04 08:21

Lhankor_Mhy

総合スコア36089

mokosamejima

2021/10/04 08:43

ご指定いただき、ありがとうございます！無事に解決することができました！助かりましたーちなみに、`ul.pagination li.active a`が反応しなかったので、`ul.pagination li.active .page-link`に変えて表示することができました！この違いはあまり分からないですが、なにせよ解決できたのでよかったです。