[英]How to align logo and text in bootstrap on small screens?
我正在尝试在引导导航栏中对齐徽标和一些文本。
参见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;
}
}
当屏幕全屏显示时,我已经取得了一些成功,但是在移动设备尺寸上,徽标和文本堆栈彼此重叠而不是彼此相邻。
如何在导航栏中将图像与文本对齐,因此:
无论屏幕大小如何,它并排保持;以及
我对徽标/文字的垂直位置有一些控制权吗?
有一个规则display: block!important;
在徽标上,这样就可以了。 像下面这样更改它应该可以完成工作。
@media (max-width: 767px) {
.navbar-brand .visible-xs {
display: inline; /* use !important if necessary */
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.