twitter-bootstrap 带有徽标和文本的 Bootstrap 导航栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34445939/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap navbar with logo and text
提问by BElias
I'm trying to create a boostrap navbar with a small square logo on the left, text (company name) to the right, and then navbar on far right. Here's code so far, I just can't figure out how to add the text.
我正在尝试创建一个 boostrap 导航栏，左侧有一个小方形徽标，右侧是文本（公司名称），然后是最右侧的导航栏。到目前为止，这是代码，我只是不知道如何添加文本。
When it goes down to XS, I need the logo and text to remain on the same line. So, I made the logo image a full width transparent PNG (to hold the column in place) and tried to add text to the right of the logo (still over the transparent part) but I can't figure this out.
当它下降到 XS 时，我需要徽标和文本保持在同一行。因此，我将徽标图像制作为全宽透明 PNG（以将列固定到位）并尝试在徽标右侧（仍在透明部分上方）添加文本，但我无法弄清楚这一点。
Any help would be great. Here's code so far:
任何帮助都会很棒。这是到目前为止的代码：
<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>回答by Fraser Crosbie
I put together a fiddle for you. I included the logo and title inside the nav. The key was adding the class pull-leftto the href around the image.
我为你整理了一把小提琴。我在导航中包含了徽标和标题。关键是将类添加pull-left到图像周围的 href 中。
https://jsfiddle.net/msm6jozL/7/
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;
}
