如何在小屏幕上的引导程序中对齐徽标和文本？

Question

I'm trying to align a logo and some text within a bootstrap nav bar.

See JSFiddle

I have the following html :

<a class="navbar-brand" href="#">
  <img class="hidden-xs" src="http://s23.postimg.org/5k9xcsb57/logo40_ul.png" alt="">
  <img class="visible-xs" src="http://s23.postimg.org/etc3mwk13/logo30_ul.png" alt="">
  <span class="navbar-brand-text">Some text here</span>
</a>

And this CSS :

.navbar-brand {
  padding: 0px;
}

.navbar-brand-text {
  padding-top: 12px;
  padding-left: 5px;
  display: inline-block;
  font-size: 0.875em;
  line-height: 1.57em;
}
.navbar-brand img {
  vertical-align: top;
  padding-top: 3px;
  display: inline-block;
}

@media (max-width: 767px) {
  .navbar-brand {
    padding: 0px;
  }

  .navbar-brand-text {
    padding-top: 12px;
    padding-left: 5px;
    display: inline-block;
    font-size: 0.875em;
    line-height: 1.57em;
  }
  .navbar-brand img {
    vertical-align: top;
    padding-top: 10px;
    padding-left: 5px;
    display: inline-block;
  }
}

I've had some success when the screen is at full width, but on mobile sizes the Logo and the Text stack on top of each other not next to each other.

How do I align my image with my text in a nav bar so :

1. it remains side by side regardless of screen size and;

2. I have some control over the vertical position of the logo / text?

Answer 1

There is a rule display: block!important; on the logo, which make it like that. Changing it like below should do do job.

@media (max-width: 767px) {
    .navbar-brand .visible-xs {
        display: inline; /* use !important if necessary */
    }
}

DEMO: http://jsfiddle.net/g8za882k/3/