0
私のモデルでのように、私の製品にビューを表示してブートストラップを使って整列させようとしています。 問題は、要素が動的に作成されるため、オフセットを設定するためにすべての要素に対して大きなbootstap divを実行できないため、elemサイズを設定しただけでは全く整列しません。
各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どこに行って、私は2つのセクションを行い、彼らは同じ反応しない..私は本当に問題は実際に理解していない..可能ですレールはうまくブートストラップをサポートしていませんか？ここで は実際に私のコードですが、私は私が私のelemsは3で整列させたい、と画面の大きさが十分でないとき、私は彼らがしたい少し..
.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--*/
\t display: none; /*--masqué par défaut--*/
\t background: #000;
\t position: fixed; left: 0; top: 0;
\t width: 100%; height: 100%;
\t opacity: .80;
\t z-index: 9999;
}
.popup_block{
\t display: none; /*--masqué par défaut--*/
\t background: #fff;
\t padding: 20px;
\t border: 20px solid #ddd;
\t float: left;
\t font-size: 1.2em;
\t position: fixed;
\t top: 50%; left: 50%;
\t z-index: 99999;
\t /*--Les différentes définitions de Box Shadow en CSS3--*/
\t -webkit-box-shadow: 0px 0px 20px #000;
\t -moz-box-shadow: 0px 0px 20px #000;
\t box-shadow: 0px 0px 20px #000;
\t /*--Coins arrondis en CSS3--*/
\t -webkit-border-radius: 10px;
\t -moz-border-radius: 10px;
\t border-radius: 10px;
}
img.btn_close {
\t float: right;
\t 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">
\t <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) %>
\t <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">
\t <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' %>
\t <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>それを変更しました私は2で整列しました。どうしますか？ scaffold.scssのような他のCSSと競合しているかもしれませんが、私はどこにいるのかわかりませんでした。 誰かが問題を見つけたことを願っています。ありがとう..
コード（github repo）にアクセスする方法はありますか？ –
はい、私はgithubリポジトリにプッシュしました。あなたは "work"フォルダにあります。ありがとうございます！ ：https://github.com/lennonmarley/42school/tree/master/work/depot_recent –
お時間をありがとう！ :) –