Rails，使用bootstrap

时间：2016-08-15 11:44:16

标签： html ruby-on-rails twitter-bootstrap

我正在尝试让我的产品显示视图并使用bootstrap对齐它们，就像在我的模型中一样。 问题在于，因为元素是动态创建的，所以我不能为我的所有元素做一个大的bootstap div，以便设置偏移量，如果我只是设置我的elem大小，它们根本没有对齐：{{ 3}} 我用黑色背景显示它们，以更好地了解每个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>

我的模型是：

我该怎么办？

编辑：我的问题还没有解决，我总是把我的元素带到各处，我做了两个部分，他们没有反应相同......我真的不明白实际上是什么问题..是否有可能导轨不支持好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有冲突，比如scaffold.scss，但我没找到我可以找到的地方。 我希望有人可能会发现这个问题。感谢..

2 个答案:

答案 0 :(得分：1)

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

要解决当前页面的问题，我会为div中的所有内容创建一个包装器并给它一个固定的高度。 EG：

  <% @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，或者你玩耍并解决问题。

答案 1 :(得分：0)

看起来你正试图在一行中插入太多列。尝试从此开始，然后您可以根据需要设置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 %>
相关问题
最新问题