Ruby on Rails(5.0.0.1)、Bootstrapを用いて開発しています。
画面内の要素を真ん中に、左右も揃えたいのですが、写真の様にうまく揃いません。
CSS記載の通り、widthを統一しているのですが…
また、解決策を探る為、backgroundに黒を入れてみたところ、指定したwidthよりも幅が広く取られています。ここにヒントがあることはわかるのですが、解決策がわからず、お分かりの方、ご指摘頂けますと幸甚です。
ruby
1<div class="container"> 2 <div class = "row" > 3 <div class="jumbotron pjumbo"> 4 <i> 5 <%= user_icon_tag @user, :alt => "icon", :class =>"icon" %> 6 <p class="profile-plate"><%= @user.user_name %>さん</br> 7 出品数<% count = @user.products.count %><%= count %>点 8 </p> 9 </i> 10 </div> 11 </div> 12 13 <div class = "row teset"> 14 <div class ="profile-c"> 15 <i class="fa fa-smile-o" aria-hidden="true"> 5</i>  16 <i class="fa fa-meh-o" aria-hidden="true"> 2</i>  17 <i class="fa fa-frown-o" aria-hidden="true"> 0</i>  18 </div> 19 </div> 20 21 <div class = "row"> 22 <div class ="profile-c"> 23 <p><%= @user.user_profile %></p> 24 </div> 25 </div> 26 27 <div class="row"> 28 <h3 class="profile-name"><%= @user.user_name %>さんの出品商品一覧</h3> 29 </div> 30 31 <div class="row"> 32 <% @products.each do |p| %> 33 <div class="col-md-3 col-sm-4 col-xs-6"> 34 <div class= 'card' %> 35 <%= link_to [:user, p ] do %> 36 <div class= 'wwrapper' > 37 <%= image_tag("earring/01.jpg", :class => "card-img-top", :alt => "Card image cap") %> 38 <div class="card-img-overlay productimg"> 39 <p class="card-title productbrand"><%= p.brand %>イヤリング</p> 40 </div> 41 </div> 42 <div class="card-block"> 43 <h6 class="card-text"><%= truncate(p.memo, length: 10) %></h6> 44 <h6 class="p-price "><%= number_with_delimiter(p.price) %>円</h6> 45 <% if (count = p.votes.count) == 0 %> 46 <h6 class="top-like"><i class="fa fa-heart-o" aria-hidden="true">  </i></h6> 47 <% elsif (count = p.votes.count) > 0 %> 48 <h6 class="top-like"><i class='fa fa-heart'> <%= count %></i></h6> 49 <% end %> 50 <h6 class="top-comment"><i class="fa fa-comment-o"></i></h6> 51 <% end %> 52 </div><!--card-block--> 53 </div><!--card--> 54</div><!--col--> 55<% end %> 56 </div><!--row--> 57</div><!--container--> 58
css
1@import "bootstrap"; 2@import "colors"; 3 4.teset{ 5 background-color: $black; 6} 7.jumbotron { 8 position: relative; 9 background: url('http://i.cubeupload.com/UWyvD2.jpg') center center; 10 width: 100%; 11 height: 100%; 12 background-size: cover; 13 overflow: hidden; 14 } 15 16.pjumbo{ 17 max-height: 18rem; 18 max-width: 50rem; 19 margin-bottom: 0px; 20 } 21.icon{ 22 width: 10rem; 23 height: 10rem; 24 border-radius: 50%; 25 -moz-border-radius: 50%; 26 -webkit-border-radius: 50%; 27 background-size: cover; 28 background-position: center center; 29} 30.profile-c{ 31 max-width: 50rem; 32 border: solid 1.5px; 33 border-color: $light-gray; 34} 35.profile-plate{ 36 background-color:rgba(0, 0, 0, 0.5); 37 color: $white; 38 margin-top: 0.5rem; 39} 40 41.fa-smile-o{ 42 color: $red; 43} 44.fa-meh-o{ 45 color: $black; 46} 47.fa-frown-o{ 48 color: $blue; 49} 50.profile-name{ 51 margin-top: 0.5rem; 52}
回答1件
あなたの回答
tips
プレビュー