[英]How do you add a thumbnail photo to a header in ruby on rails?
I am very new to programming and ruby on rails so bear with me! 我对Rails编程和红宝石非常陌生,所以请多多包涵! I resized a picture of mine into a thumbnail sized photo and I want to upload it into my header that appears on every page of my website.
我将我的照片调整为缩略图大小,并希望将其上传到网站每个页面上显示的标题中。 I placed the image in my
apps/assets/images
folder. 我将图像放置在我的
apps/assets/images
文件夹中。 My problem is that the icon doesn't appear correctly in the header, instead of to the right of Lions Wrestling it appears below it. 我的问题是该图标未正确显示在标题中,而不是在Lions Wrestling右侧,而是显示在其下方。
This is the code that I have: 这是我的代码:
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#">Lions Wrestling
<div class="thumbnail">
<%= image_tag "Lions.jpg"%>
</div>
</a>
Thanks! 谢谢!
Apart from bootstrap-specific styling, you will probably be having an issue with display: inline
& display: inline-block
: 除了特定于引导程序的样式外,您可能还会遇到
display: inline
& display: inline-block
:
CSS 的CSS
http://jsfiddle.net/uXEGy/ http://jsfiddle.net/uXEGy/
<div class="navigation">
<div class="image"><img src="http://elonmuskblog.files.wordpress.com/2012/03/elon-musk-blog-photo.jpg" height="150"></div>
<div class="text">Your text here</div>
</div>
.navigation { display: block; }
.navigation > div { display: inline-block; }
.image { vertical-align: middle; }
You'll need to make sure your image div has a display
property of inline-block
您需要确保图像div的
display
属性为inline-block
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.