简体   繁体   中英

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! 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. 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.

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 :


CSS

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

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