图像周围的按钮没有以相同的方式响应

Question

这是我的第一个问题。

我有一个使用 rails 和 bootstrap 的应用程序。当屏幕变小时，图片周围的项目不会像在中型和大型屏幕上那样做出反应。看看：

https://imgur.com/a/zcQQZWv - 大小适中，一切正常。 https://imgur.com/a/2KTIgcy - Bootstrap 体积小（功能不好）

我希望星星和按钮位于图片的下方和宽度范围内。我认为 bootstrap 自然会使按钮响应图片，因为所有图片都位于同一个 <div class="col-sm-4 col-md-3">

中

我目前没有设计此页面的样式，因此无需向此问题添加 CSS。

我正在使用回形针来调整图像大小 gem。

<div class="row">
<% @movies.each do |movie| %>
    <div class="col-sm-4 col-md-3">                    
        <div class="thumbnail">
            <% if user_signed_in? %>
                <div class="js-rating" movie_id="<%= movie.id %>" data-rate-value=6></div>
            <% end %>
            <br>
            <%= link_to (image_tag movie.image.url(:medium), class: 'image'), user_movie_path(movie.user, movie) %>
            <% if movie.user == current_user %>
                <br>
                <div class="image-buttons">
                    <%= link_to 'Edit', edit_user_movie_path(movie.user, movie), class: 'btn btn-primary' %>
                    <%= link_to "Remove", user_movie_path(movie.user, movie), method: :delete, data: { confirm: "You Sure?" }, class: 'btn btn-primary btn-remove-main' %>
                </div>
            <% end %>
        </div>
    </div>
<% end %>

Answer 1

基本上，您的问题可以归结为“如何让我的缩略图 div 与其中的图像一样宽？

使用与此答案相同的技术：

.wrapper {
  border: 1px solid red;
  display: inline-table;
  margin-top: 1em;
  width: 1%;
  text-align: left;
}

.col {
  text-align: center;
}

<div class="col">
  <div class="wrapper">
    <div>&#8902; &#8902; &#8902; &#8902; &#8902;</div>
    <img src="http://www.fillmurray.com/284/196">
    <button>My Button</button> <button>My Other Button</button>
  </div>
</div>

图像周围的按钮没有以相同的方式响应

Buttons around image not responding in the same way

html

css

ruby

ruby-on-rails

twitter-bootstrap-3