Ruby on rails 引导导航栏图像未出现在Rails中
我在获取应用程序中的文件图像时遇到问题。现在，在它的位置只是一个图标，表明他们应该是一个图像存在。我现在正在专门制作这个标志（navbar品牌）。目前，这些图像都在同一个文件夹中 如何正确显示和调整图形大小 这是我的密码：Ruby on rails 引导导航栏图像未出现在Rails中,ruby-on-rails,twitter-bootstrap,image,navbar,Ruby On Rails,Twitter Bootstrap,Image,Navbar,我在获取应用程序中的文件图像时遇到问题。现在，在它的位置只是一个图标，表明他们应该是一个图像存在。我现在正在专门制作这个标志（navbar品牌）。目前，这些图像都在同一个文件夹中 如何正确显示和调整图形大小 这是我的密码： <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8">
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width= width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
margin-bottom: 0;
border-radius: 0;
}
/* Add a gray background color and some padding to the footer */
footer {
background-color: #f2f2f2;
padding: 25px;
}
.carousel-inner img {
width: 100%; /* Set width to 100% */
margin: auto;
min-height:200px;
}
.navbar-brand {
width: 57px;
height: 27px;
}
.navbar-brand img {
width: 30px;
height: 30px;
}
/* Hide the carousel text when the screen is less than 600 pixels wide */
@media (max-width: 600px) {
.carousel-caption {
display: none;
}
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="pull-left">
<img src="rsz_1logo" class="navbar-brand">
</div>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><%= link_to "Home", root_path %></li>
<li><%= link_to 'Learn More', controller: 'posts' %> </li>
<% if user_signed_in? %>
<li><%= link_to 'Calculate Water Footprint', controller: 'waterusages' %></li>
<li><%= link_to 'See Your Usage', waterusage_result_path %></li>
<% end %>
<!-- <a href="/">Calculate Water Footprint</a></li> -->
<!-- <li><a href="#">Projects</a></li> -->
<li><a href="#">About Us</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<% if !user_signed_in? %>
<li> <%= link_to('Sign Up', new_user_registration_path) %> </li>
<li> <%= link_to('Login', new_user_session_path) %> <span class="glyphicon glyphicon-log-in"></span> </li>
<% end %>
<% if user_signed_in? %>
<li> <%= link_to('Logout', destroy_user_session_path, method: :delete) %> </li>
<% end %>
</ul>
</div>
</div>
</nav>
</body>
</html>
引导示例
/*删除导航栏的默认边距底部和圆角边框*/
navbar先生{
页边距底部：0；
边界半径：0；
}
/*为页脚添加灰色背景色和一些填充*/
页脚{
背景色：#F2F2；
填充：25px；
}
.旋转木马内部img{
宽度：100%；/*将宽度设置为100%*/
保证金：自动；
最小高度：200px；
}
.navbar品牌{
宽度：57px；
高度：27px；
}
.navbar品牌img{
宽度：30px；
高度：30px；
}
/*当屏幕宽度小于600像素时隐藏旋转木马文本*/
@介质（最大宽度：600px）{
.旋转木马标题{
显示：无；
}
}
图像标签和指南确实有助于显示图像，但我仍然没有看到如何调整图像大小。要调整图像大小，请将该类交给您的
。logo{}src=“rsz_1logo”app/assets/images