bootstrapとlink_toについて

bootstrapを使い装飾を行っていたのですが、link_toを追加した際に、widthが変わってしまいました。
上段画像の大きさを保ちlink_toを追加する方法を教えてください。

なぜ、link_toを追加した際に、大きさが変わってしまったのか、教えてください。

HTML
1
2<div class="container">
3<h1 class="text-center">〇〇のブログ</h1>
4<div class="head row">
5    <% @articles.each do |article| %>
6        <div class="col-sm-3 margin-top-5per article-block">
7          <%= image_tag "chill.jpeg", class: "img-responsive img-width" %>
8          <div>
9            <p class="title"><%= article.title %></p>
10            <span>
11              <%= article.created_at.strftime("%Y年%m月%d日") %>
12            </span>
13          </div>
14        </div>
15    <% end %>
16  </div>
17</div>
18

HTML
1<div class="container">
2<h1 class="text-center">〇〇のブログ</h1>
3<div class="head row">
4    <% @articles.each do |article| %>
5    <%= link_to article do %> 
6        <div class="col-sm-3 margin-top-5per article-block">
7          <%= image_tag "chill.jpeg", class: "img-responsive img-width" %>
8          <div>
9            <p class="title"><%= article.title %></p>
10            <span>
11              <%= article.created_at.strftime("%Y年%m月%d日") %>
12            </span>
13          </div>
14        </div>
15      <% end %>
16    <% end %>
17  </div>
18</div>

scss
1// Place all the styles related to the articles controller here.
2// They will automatically be included in application.css.
3// You can use Sass (SCSS) here: https://sass-lang.com/
4
5.margin-top-5per{
6  margin-top: 5%;
7}
8
9.title {
10  font-size: 20px;
11}
12
13.article-block {
14  background-color:white;
15  border:1px solid #888888;
16}
17
18.img-width {
19  width: 110%;
20  padding-top: 15px;
21  padding-right: 10px;
22}

scss
1@import '~bootstrap/scss/bootstrap';
2
3body{
4  background-color: #f5f5f5;
5}

よろしくお願いします。

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

回答1件

ベストアンサー

おそらくですが、

<div class="col-sm-3 margin-top-5per article-block">
  ...
</div>

ブロック要素である上記箇所をそのまま <%= link_to do %>...<% end %> タグ、つまりインライン要素である <a>...</a> タグでラップしたのが原因なのではないでしょうか？

以下のように書き換えてみたらどうなりますでしょうか？

scss
1.article-block {
2  display: block;  // <= これを追加
3  background-color: white;
4  border: 1px solid #888888;
5}
6

rails
1
2<div class="container">
3  <h1 class="text-center">〇〇のブログ</h1>
4  <div class="head row">
5    <% @articles.each do |article| %>
6      <%= link_to article, class: 'col-sm-3 margin-top-5per article-block' do %>
7        <%= image_tag "chill.jpeg", class: "img-responsive img-width" %>
8        <div>
9          <p class="title"><%= article.title %></p>
10          <span>
11            <%= article.created_at.strftime("%Y年%m月%d日") %>
12          </span>
13        </div>
14      <% end %>
15    <% end %>
16  </div>
17</div>