我正在尝试创建一个boostrap导航栏,左侧是小方形徽标,右侧是文本(公司名称),然后是最右侧的导航栏.到目前为止这里的代码,我只是无法弄清楚如何添加文本.
当它下降到XS时,我需要徽标和文本保持在同一行.因此,我将徽标图像设置为全宽度透明PNG(将列保持在适当位置)并尝试在徽标右侧添加文本(仍然在透明部分上方)但我无法弄清楚这一点.
任何帮助都会很棒.这是迄今为止的代码:
<div class="header">
<div class="container">
<div class="row">
<div class="col-md-5 col-sm-5">
<div class="logo"><div style="height:50px; width:150px; position:absolute; border:solid 1px red;"></div><a href="<?php echo site_url(); ?>/"><img src="<?php echo get_template_directory_uri(); ?>/images/logo_small.png"
class="img-responsive"></a></div>
</div>
<div class="col-md-7 col-sm-7 hidden-xs">
<!-- Navbar Start Here -->
<div role="navigation" class="navba-r navbar-default">
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#"></a>
</div>
<nav role="navigation" class="collapse navbar-collapse navbar-left">
<ul class="navbar-nav nav aa">
<li><a href="javascript:bookmarkscroll.scrollTo('company')">COMPANY</a></li>
<li><a href="javascript:bookmarkscroll.scrollTo('people')">PEOPLE</a></li>
<li><a href="javascript:bookmarkscroll.scrollTo('patient')">PATIENTS</a></li>
<li><a href="javascript:bookmarkscroll.scrollTo('contact')">CONTACT</a></li>
</ul>
</nav>
</div>
</div>
<!-- Navbar End Here -->
</div> …