Rails，使用引导程序对齐动态元素

Question

我正在尝试让我的产品显示视图并使用引导程序对齐它们，就像在我的模型中一样。 问题是，因为元素是动态创建的，我不能为我的所有元素做一个大的引导 div，以便设置偏移量，如果我只是设置我的元素大小，它们根本没有对齐：@987654321 @ 我用黑色背景显示它们，以更好地查看每个 div 的位置。

  <% @products.each do |product| %>
    <div class="entry col-xs-4 col-xs-offset-0 col-lg-4 col-lg-offset-0">
      <div class="product_img img-responsive">
        <%= image_tag(product.image_url)%>
      </div>
    <div class="product_description">
      <h3><%= product.title %></h3>
        <%= sanitize(product.description)%>
      <div class="price_line">
        <span class="price"><%=number_to_currency(product.price)%></span>
    </div>
  </div>
</div>

我的模型是：

请问我该怎么办？

编辑：我的问题还没有解决，我总是让我的 elems 到处跑，我做了两个部分，他们的反应不一样..我真的不明白实际上是什么问题.. 有没有可能是 rails不支持好Bootstrap？ 这是我的代码，我稍微改了一下..

.logo_img{
  position: relative;
  top: 55px;
  left: -50px;
  max-width: 250px;
}

 .title{
   display: block;
  top: 100px;
}

.img_tasse{
  top: 100px;
  left : -60px;
  max-width: 110px;
}

h1{
  text-align: center;
  z-index: 3;
  display: block;
  left: -50px;
top : 190px;
}

.img_back{
  z-index: 1;
  top: 170px;
  left : 0;
}

.illu_front{

  top: -410px;
  z-index: 2;
}

p.txt_soli{
  color: white;
  z-index: 2;
  top: -760px;
}

.soli{
  background-color: blue;
}

.entry{
  background-color: yellow;
  margin: 0;
  padding: 0;
  top : -200px;
  text-align: left;
}

.product_img{
  margin-right: 0;
  padding: 0;
  background-color: red;
  display: block;
  position: relative;
  width: 100%;
}

.the_img{
  margin: 0;
  padding: 0;
  background-color: blue;
    width: 15vw;
    max-width: 250px;
}

.the_img:hover + .discover{
  display: block;
}

.the_img + .discover:hover{
  display: block;
  color: black;

}

.the_img:hover{
  opacity: 0.3;
}

.prod{
  background-color: black;
  margin-right : 10px;
  margin-left: 10px;
}

.discover {
  display: none;
  position: absolute;
  top: 5vw;
  left: 2.5vw;
  color: black;
  font-size: 1.2vw;
  border-style: solid;
  border-width: 2px;
}

.line_title{
  position: relative;
}

#fade { /*--Masque opaque noir de fond--*/
	display: none; /*--masqué par défaut--*/
	background: #000;
	position: fixed; left: 0; top: 0;
	width: 100%; height: 100%;
	opacity: .80;
	z-index: 9999;
}
.popup_block{
	display: none; /*--masqué par défaut--*/
	background: #fff;
	padding: 20px;
	border: 20px solid #ddd;
	float: left;
	font-size: 1.2em;
	position: fixed;
	top: 50%; left: 50%;
	z-index: 99999;
	/*--Les différentes définitions de Box Shadow en CSS3--*/
	-webkit-box-shadow: 0px 0px 20px #000;
	-moz-box-shadow: 0px 0px 20px #000;
	box-shadow: 0px 0px 20px #000;
	/*--Coins arrondis en CSS3--*/
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
img.btn_close {
	float: right;
	margin: -40px -30px 0 0;
}
/*--Gérer la position fixed pour IE6--*/

a:hover{
  background-color: none;
}

<section class="product_section_1">
  <header id="top" class="header-store">
    <div class="img-top container">
      <a href="/showcase/Home"> <p><%=image_tag("logo.png", :class => 'logo_img col-xs-3 col-xs-offset-5 col-sm-3 col-sm-offset-5 col-md-3 col-md-offset-5 col-lg-3 col-lg-offset-5')%></p></a>
      <p class="title col-xs-2 col-xs-offset-5 col-sm-2 col-sm-offset-5 col-md-2 col-md-offset-5 col-lg-2 col-lg-offset-5"> nos collections</p>
            <div class="img_tasse col-xs-2 col-xs-offset-6 col-sm-2 col-sm-offset-6 col-md-2 col-md-offset-6 col-lg-2 col-lg-offset-6"><%=image_tag("tasse-section-1.png")%></div>
    </div>
    <div class="block-sultan container">
      <h1 class="col-xs-5 col-xs-offset-5 col-sm-5 col-sm-offset-5 col-md-4 col-md-offset-5 col-lg-3 col-lg-offset-5 line_title">Les infusions du Sultan</h1>
      <div class="row">
        <div class="img_back col-xs-10 col-xs-offset-0 col-sm-10 col-sm-offset-0 col-md-9 col-md-offset-0 col-lg-9 col-lg-offset-1"><%=image_tag("photo-back-section-1.png")%></div>
        <div class="illu_front col-xs-6 col-xs-offset-7 col-sm-6 col-sm-offset-7 col-md-4 col-md-offset-7 col-lg-4 col-lg-offset-7"><%=image_tag("illu-front-section-1.png")%></div>
      </div>
      <p class="txt_soli col-xs-4 col-xs-offset-2 col-sm-4 col-sm-offset-2 col-md-4 col-md-offset-2 col-lg-4 col-lg-offset-2"> le roi preferé des francais, François 1er fut connu pour son amour de l'élegance, du raffinement et de la culture. Contemporain
      de Soliman, ils établirent ensemble les premières relations diplomatiques au monde.</p>
  </div>
</header>
  <div class="row prod">
    <% cache ['store', Product.latest] do %>
    <% @type1.each_with_index do |product, index| %>
    <% cache ['entry', product] do %>
      <div class="product-tile">
        <div class="entry col-xs-2 col-xs-offset-0 col-sm-4 col-sm-offset-0 col-md-4 col-md-offset-0 col col-lg-4 col-lg-offset-0 col">
          <h3><%= product.title %></h3>
          <div class="product_img img-responsive">
            <%= image_tag(product.image_url, :class => 'the_img') %>
            <%= link_to 'Discover', '#', class: %w(poplight discover), data: { rel: "popup_type1#{index}", width: "1000"} %>
              <div id="popup_type1<%= index %>" class="popup_block">
	               <h3><%=product.title%></h3>
                 <%= image_tag(product.image_url, :class => 'the_img') %>
                  <span class="price"><%=number_to_currency(product.price)%></span>
                  <%= button_to 'Add to Cart', line_items_path(product_id: product) %>
	                <p>Soh Tanaka est traduit sur developpez.com.</p>
              </div>
          </div>
          <div class="product_description">
            <%= sanitize(product.description)%>
            <div class="price_line">
              <span class="price"><%=number_to_currency(product.price)%></span>
            </div>
          </div>
        </div>
      </div>
    <%end%>
    <%end%>
    <%end%>
  </div>
</section>
<section class="product_section_2">
  <header id="top" class="header-store">
    <div class="img-top container">
      <div class="img_tasse col-xs-2 col-xs-offset-6 col-sm-2 col-sm-offset-6 col-md-2 col-md-offset-6 col-lg-2 col-lg-offset-6"><%=image_tag("tasse-section-2.png")%></div>
    </div>
    <div class="block-sultan container">
      <h1 class="col-xs-5 col-xs-offset-5 col-sm-5 col-sm-offset-5 col-md-4 col-md-offset-5 col-lg-3 col-lg-offset-5 line_title">Les infusions du Roi</h1>
      <div class="row">
        <div class="img_back col-xs-10 col-xs-offset-0 col-sm-10 col-sm-offset-0 col-md-9 col-md-offset-0 col-lg-9 col-lg-offset-1"><%=image_tag("photo-back-section-2.jpg")%></div>
        <div class="illu_front col-xs-6 col-xs-offset-7 col-sm-6 col-sm-offset-7 col-md-4 col-md-offset-7 col-lg-4 col-lg-offset-7"><%=image_tag("illu-front-section-2.jpg")%></div>
      </div>
      <p class="txt_soli col-xs-4 col-xs-offset-2 col-sm-4 col-sm-offset-2 col-md-4 col-md-offset-2 col-lg-4 col-lg-offset-2"> le roi preferé des francais, François 1er fut connu pour son amour de l'élegance, du raffinement et de la culture. Contemporain
      de Soliman, ils établirent ensemble les premières relations diplomatiques au monde.</p>
    </div>
  </header>
  <div class="row prod">
    <% cache ['store', Product.latest] do %>
    <% @type2.each_with_index do |product, index| %>
    <% cache ['entry', product] do %>
      <div class="product-tile">
        <div class="entry col-xs-5 col-xs-offset-0 col-sm-4 col-sm-offset-1 col-md-4 col-md-offset-1 col col-lg-4 col-lg-offset-1 col">
          <h3><%= product.title %></h3>
          <div class="product_img img-responsive">
            <%= image_tag(product.image_url, :class => 'the_img') %>
            <%= link_to 'Discover', '#', class: %w(poplight discover), data: { rel: "popup_type2#{index}", width: "1000"} %>
              <div id="popup_type2<%= index %>" class="popup_block">
	               <h3><%=product.title%></h3>
                 <%= image_tag(product.image_url, :class => 'the_img') %>
                 <span class="price"><%=number_to_currency(product.price)%></span>
                 <%= button_to 'Add to Cart', line_items_path(product_id: product) %>
                 <%= text_field_tag 'quantity' %>
	                <p>Soh Tanaka est traduitee sur developpez.com.</p>
              </div>
          </div>
          <div class="product_description">
            <%= sanitize(product.description)%>
            <div class="price_line">
              <span class="price"><%=number_to_currency(product.price)%></span>
            </div>
          </div>
        </div>
      </div>
    <%end%>
    <%end%>
    <%end%>
  </div>
</section>

我希望我的元素对齐 3，当屏幕不够大时，我希望它们对齐 2.. 你会怎么做？ 也许与其他 css 存在冲突，例如支架.scss，但我没有找到我可以去的地方。 我希望有人可能会发现问题。谢谢..

Answer 1

问题在于高度的变化。如果您的文本不断变化，请考虑使用省略号将其截断，然后在显示页面上显示更多内容。

要解决当前页面的问题，我会为 div 中的所有内容制作一个包装器，并为其设置一个固定高度。例如：

  <% @products.each do |product| %>
    <div class="product-tile">
      <div class="entry col-xs-4 col-xs-offset-0 col-lg-4 col-lg-offset-0">
        <div class="product_img img-responsive">
          <%= image_tag(product.image_url)%>
        </div>
      <div class="product_description">
        <h3><%= product.title %></h3>
          <%= sanitize(product.description)%>
        <div class="price_line">
          <span class="price"><%=number_to_currency(product.price)%></span>
        </div>
      </div>
    </div>
  <% end %>

然后给product-tile css 设置一个高度，比如height: 400px，或者你可以一起玩和锻炼。

Answer 2

您似乎试图将太多列放入一行。尝试从这个开始，然后您可以根据需要设置 div 的样式。

<% @products.in_groups_of(3, false) do |products| %>
  <div class="row">
    <% products.each do |product| %>
      <div class="col-xs-4 ...">
        ...
      </div>
    <% end %>
  </div>
<% end %>