css - 每行四个产品 Bootstrap/ROR 停止使用添加的信息？

Question

我在使用 Ruby on Rail 的 in_groups_of 方法以 4 为一组显示产品行时遇到问题。当我的代码如下时，它完美地工作:

<% @products.in_groups_of(4, false).each do |row| %>
<div class="center">
  <td>
    <tr>
        <% for product in row %>
          <product>
            <u><%= link_to "#{product.title}", product_path(product) %></u>
          </product>    
    </tr>    
  </td>        
</div>

但是，当我尝试添加其他产品信息时，所有产品都居中。这是添加了附加信息的页面:

<% @products.in_groups_of(4, false).each do |row| %>
<div class="center">
  <td>
    <tr>
        <% for product in row %>
          <product>
            <u><%= link_to "#{product.title}", product_path(product) %></u>
          </product>

          <%= image_tag product.picture.url if product.picture? %>
          <% if product.active == false %>
            <p>Sorry, this product is not available at this time.</p>
          <% else %>
             <div id="paypalbutton"><%= raw product.paypalbutton %></div>
          <% end %>

        <% end %>  
    </tr>    
  </td>        
</div>
<% end %>

我认为我的 SCSS 可能是问题所在，但我不确定是什么导致它崩溃。页面中使用的所有SCSS如下:

.products {
  list-style: none;
  margin: 0;
  li {
    overflow: auto;
    padding: 10px 0;
    border-bottom: 1px solid $gray-lighter;
  }
}

product {
  font-size: 1.5em;
  letter-spacing: -1px;
  margin-bottom: 30px;
  font-weight: normal;
  color: $dark-gray-darker;
  u {
    text-decoration: underline;
  }
}

#paypalbutton {
  height: 50px;
  width: 200px;
  margin:0 auto;
}

删除 'margin:0 auto;'来自#paypalbutton 也没有改变任何东西。

Answer 1

我不认为这是解决这个问题的正确方法，但我使用卡片和导航栏类让它工作

<div class="container-center">
<% @products.in_groups_of(4, false) do |group| %>
  <% for product in group %>
    <ul class="nav navbar-nav">
      <li>
        <div class="card" style="width: 25rem;">

          <%= image_tag product.picture.url if product.picture? %>

          <div class="card-block">
            <h3 class="card-title">
              <u><%= link_to "#{product.title}", product_path(product) %></u>
            </h3>

            <div class="center">
              <% if product.active == false %>
                <p class="card-text">Sorry, this product is not available at this time.</p>
              <% else %>
                <div class="card-text" id="paypalbutton"><%= raw product.paypalbutton %></div>
              <% end %>
            </div>

          </div>
        </div>
      </li>
    </ul>
  <% end %>
<% end %>
</div>