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

时间:2015-03-17 18:53:18

标签: html css html5 twitter-bootstrap twitter-bootstrap-3

我正在尝试在引导导航栏中对齐徽标和一些文本。

请参阅JSFiddle

我有以下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>

这个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;
  }
}

我在屏幕全宽时取得了一些成功,但在移动尺寸上,徽标和文字堆叠在一起并不是彼此相邻。

如何将我的图像与导航栏中的文本对齐,以便:

  1. 无论屏幕大小如何,它都会并排存在;

  2. 我可以控制徽标/文字的垂直位置吗?

1 个答案:

答案 0 :(得分:2)

徽标上有一条规则display: block!important;,就是这样。如下更改它应该可以正常工作。

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

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