简体   繁体   English

如何将缩略图添加到Rails中的ruby标题中?

[英]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: inlinedisplay: 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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM