css - 带有 Logo 和文本的 Bootstrap 导航栏

Question

我正在尝试创建一个 boostrap 导航栏，左边是一个小方形 Logo ，右边是文本(公司名称)，然后是最右边的导航栏。到目前为止，这是代码，我只是不知道如何添加文本。

当它下降到 XS 时，我需要 Logo 和文本保持在同一行。因此，我将 Logo 图像设为全宽透明 PNG(以将列固定到位)并尝试在 Logo 右侧添加文本(仍在透明部分上方)，但我无法弄清楚。

任何帮助都会很棒。到目前为止，这是代码:

    <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

我为你整理了一个 fiddle 。我在导航中包含了 Logo 和标题。关键是将 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;
}