位于导航栏外的品牌形象

Question

我想将我的图片放在 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>

Answer 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>

Answer 2

为什么不在这里使用 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>

Answer 3

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

Answer 4

使用 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;
}

Answer 5

我有一个没有 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>

位于导航栏外的品牌形象

Brand image sitting outside navbar

html

css

navbar

twitter-bootstrap