位于导航栏外的品牌形象答案

【问题标题】：Brand image sitting outside navbar位于导航栏外的品牌形象
【发布时间】：2017-03-23 20:46:48
【问题描述】：

我想将我的图片放在navbar 内，并将我的名字放在图片的右侧。这是我的代码：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img src="http://i665.photobucket.com/albums/vv18/luckycharm_boy/lucky_zpsfnt9dbol.jpg" border="0" alt=" photo lucky_zpsfnt9dbol.jpg" class="img-circle" height="50px">luckycharm-boy</a>
    </div>
  </div>
</nav>

【问题讨论】：

试着给你的主播class="pull-left"

标签： html css twitter-bootstrap navbar

【解决方案1】：

您可以在.navbar-brand 上使用Flexbox 并稍微减少padding

.navbar-default .navbar-brand {
  display: flex;
  align-items: center;
  padding: 5px;
}
.navbar-brand img {
  height: 100%;
  margin-right: 20px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#"><img src="http://i665.photobucket.com/albums/vv18/luckycharm_boy/lucky_zpsfnt9dbol.jpg" border="0" alt=" photo lucky_zpsfnt9dbol.jpg" class="img-circle" height="50px">luckycharm-boy</a>
    </div>
  </div>
</nav>

【讨论】：

【解决方案2】：

我有一个没有 flex 的解决方案。您只需为.navbar-brand 和.navbar-brand>img 设置一些属性。

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.navbar-brand {
 height: auto;
}
.navbar-brand>img {
  display: inline-block;
  padding-right: 10px;
}

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img src="http://i665.photobucket.com/albums/vv18/luckycharm_boy/lucky_zpsfnt9dbol.jpg" border="0" alt=" photo lucky_zpsfnt9dbol.jpg" class="img-circle" height="50px">luckycharm-boy</a>
    </div>
  </div>
</nav>

【讨论】：

【解决方案3】：

为什么不在这里使用media 对象？

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <div class="media"> 
        <div class="media-left media-middle"> 
           <a href="#">
             <img src="http://i665.photobucket.com/albums/vv18/luckycharm_boy/lucky_zpsfnt9dbol.jpg" border="0" alt=" photo lucky_zpsfnt9dbol.jpg" class="img-circle" height="50px">
           </a>
        </div>
        <div class="media-body media-middle"> 
          <h4 class="media-heading">Luckycharm-boy</h4> 
        </div>
      </div>
    </div>
  </div>
</nav>

【讨论】：

【解决方案4】：

我更喜欢的另一种方式是 - 在没有 nav-header 的完整导航栏中创建一个完整的“行” div，然后您可以完全控制各种屏幕尺寸的 img 和文本位置的移动以及大屏幕.然后你可以给出各种 col（列）大小并写在 . 我这么说是因为它可以帮助您将其放置在任何位置

【讨论】：

【解决方案5】：

简单的解决方法是使用span。看一下这个。 DEMO这里。

HTML：

<nav class="navbar navbar-default">
    <div class="navbar-header">
        <a class="navbar-logo" href="#">
            <span><img src="http://i665.photobucket.com/albums/vv18/luckycharm_boy/lucky_zpsfnt9dbol.jpg" border="0" alt=" photo lucky_zpsfnt9dbol.jpg" class="img-circle" height="50px"/></span>
            luckycharm-boy
        </a>
    </div>
</nav>

CSS：

a.navbar-logo {
  color: #666666;
}

【讨论】：