带徽标和文本的Bootstrap导航栏

Question

我正在尝试创建一个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>
            </div>
        </div>
    </div>

Answer 1

我为你准备了一个小提琴.我在导航中包含了徽标和标题.关键是将类添加pull-left到图像周围的href.

https://jsfiddle.net/msm6jozL/7/

<div class="container">
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="logo pull-left" href="#"><img src="https://placehold.it/150x30"></a>
        <span class="name pull-left">COMPANY NAME</span>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">COMPANY</a></li>
          <li><a href="#">PEOPLE</a></li>
          <li><a href="#">PATIENTS</a></li>
          <li><a href="#">CONTACT</a></li>
        </ul>
      </div>
    </div>
  </nav>
</div>


.logo {
  padding: 10px 10px 0 10px;
}

.name {
  font-size: 14px;
  color: #333;
  padding-top: 15px;
}