example / index.html.erb未正确显示

Question

＆＃13;

＆＃13;

body {
	padding-top: 5%;
	padding-bottom: 5%;
}

.title {
	padding-top: 40px;
	min-height: 400px;
  margin-bottom: 5%;
}

.notice,
.alert {
	margin-top: 50px;
}

h1 {
	padding-bottom: 3%;
}

.navbar {
	background: white;
	border-bottom: 5px solid #D70000;
}

.icon-bar {
	color: #D70000;
}

.navbar-brand {
	text-decoration: none;
	color: black;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 1.2em;
	padding: 20px 15px;
	margin-top: 0;
}

.navbar-brand a,
.navbar-inverse .navbar-nav>li>a {
	text-decoration: none;
	color: black;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 1.2em;
	padding: 20px 15px;
}

.navbar-brand a:hover,
.navbar-inverse .navbar-nav>li>a:hover {
	color: white;
	text-decoration: none;
	background-color: #D70000;
}

.footer {
	font-family: Verdana, Geneva, sans-serif;
  right: 0;
  bottom: 0;
  left: 0;
  position: fixed;
  padding: 1em;
  background-color: #efefef;
  text-align: center;
}

h1,
h2,
p {
	text-align: center;
}

h2 {
	font-family: Verdana, Geneva, sans-serif;
}

.metric {
	margin: 0 auto;
	width: 100%;
	height: auto;
}

#bg {
	background-image: image_url("redvinyl.jpg");
	background-attachment: fixed;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size:cover;
	min-height: 100%;
	min-width: 100%;
}

.carousel-img {
	width: 600px;
	height: auto;
	margin: auto;
}

.carousel-caption {
	color: ghostwhite;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
	font-family: Futura, Helvetica, sans-serif;
	font-size: 4.2em;
	margin: auto;
	padding-bottom: 20%;
}

.form-row {
	margin: auto;
	width: 60%;
	height: auto;
	padding-top: 1%;
}

.form-entry {
	width: 100%;
	height: auto;
	margin: auto;
}

.auth-links {
	margin: auto;
	height: auto;
	width: 20%;
}

.padding {
	padding-top: 25px;
}

.burning {
	color: black;
	letter-spacing: .25em;
	font-weight: bold;
}

.navsearch {
	margin-top: 12px;
}

body {
	padding-top: 5%;
	padding-bottom: 5%;
}

.title {
	padding-top: 40px;
	min-height: 400px;
  margin-bottom: 5%;
}

.notice,
.alert {
	margin-top: 50px;
}

h1 {
	padding-bottom: 3%;
}

.navbar {
	background: white;
	border-bottom: 5px solid #D70000;
}

.icon-bar {
	color: #D70000;
}

.navbar-brand {
	text-decoration: none;
	color: black;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 1.2em;
	padding: 20px 15px;
	margin-top: 0;
}

.navbar-brand a,
.navbar-inverse .navbar-nav>li>a {
	text-decoration: none;
	color: black;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 1.2em;
	padding: 20px 15px;
}

.navbar-brand a:hover,
.navbar-inverse .navbar-nav>li>a:hover {
	color: white;
	text-decoration: none;
	background-color: #D70000;
}

.footer {
	font-family: Verdana, Geneva, sans-serif;
  right: 0;
  bottom: 0;
  left: 0;
  position: fixed;
  padding: 1em;
  background-color: #efefef;
  text-align: center;
}

h1,
h2,
p {
	text-align: center;
}

h2 {
	font-family: Verdana, Geneva, sans-serif;
}

.metric {
	margin: 0 auto;
	width: 100%;
	height: auto;
}

#bg {
	background-image: image_url("redvinyl.jpg");
	background-attachment: fixed;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size:cover;
	min-height: 100%;
	min-width: 100%;
}

.carousel-img {
	width: 600px;
	height: auto;
	margin: auto;
}

.carousel-caption {
	color: ghostwhite;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
	font-family: Futura, Helvetica, sans-serif;
	font-size: 4.2em;
	margin: auto;
	padding-bottom: 20%;
}

.form-row {
	margin: auto;
	width: 60%;
	height: auto;
	padding-top: 1%;
}

.form-entry {
	width: 100%;
	height: auto;
	margin: auto;
}

.auth-links {
	margin: auto;
	height: auto;
	width: 20%;
}

.padding {
	padding-top: 25px;
}

.burning {
	color: black;
	letter-spacing: .25em;
	font-weight: bold;
}

.navsearch {
	margin-top: 12px;
}

＆＃13;

＆＃13;

＆＃13;

我的index.html.erb页面没有正确显示，因为您可以在附件中看到。它必须是一个前端问题。我发送索引和部分以及问题的打印屏幕gaps in index page

＆＃13;

＆＃13;

# _product.html.erb
<div class="col-xs-12 col-sm-6 col-lg-4 product">
	<%= image_tag(product.image_url, class: "img-responsive img-rounded") %>
  <div class="col-lg-12">
  	<h1><strong><%= product.name %></strong></h1>
	</div>
	<div class="col-lg-12">
  	<p><%= product.description %></p>
	</div>
	<div class="col-lg-12">
  	<p>$<%= product.price %></p>
	</div>
	<div class="col-lg-12 crud1">
  	<%= link_to 'Show', product %>
  	<%= link_to 'Edit', edit_product_path(product) %>
  	<%= link_to 'Destroy', product, method: :delete, data: { confirm: 'Are you sure?' } %>
	</div>
</div>

＆＃13;

.product-show {
	padding-top: 3%;
}

.paycrud {
	text-align: center;
}

.buttoncenter {
	text-align: center;
}

.crud1 {
	text-align: center;
}

.paginate {
	text-align: center;
}

.rating {
	text-align: center;
}

＆＃13;

# index.html.erb
<div class="container-fluid title">
  <p id="notice"><%= notice %></p>
  <div class="row">
    <h1 id="vinyls">Listing Products</h1>
  </div>
  
  
  <div class="container">
    <div class="row">
      <% cache(cache_key_for_products) do %>
        <%= render @products %>
      <% end %>
    </div>
  </div>
  <br>
  <div class="buttoncenter"><%= link_to 'New Product', new_product_path, class: "btn btn-default" %></div>

</div>

＆＃13;

＆＃13;

＆＃13;