坐在导航栏外的品牌形象

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

来源

2016-05-15 HomeBrainBox

试着给你的锚'类= “拉左”' –

您可以在.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>

来源

2016-05-15 11:09:12

为什么不使用media检测者H ERE？

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

来源

2016-05-15 11:18:20

的另一种方式，我宁愿是 - 打造全导航栏的整体“行”的div没有导航头，那么你可以完全控制IMG和文本的位置在不同的屏幕尺寸定位为移动作为以及大屏幕。然后你可以给各种col（列）尺寸并写入。我在说这个，因为它会帮助你把它放在任何位置

来源

2016-05-15 11:21:27 DeveloperCoding

简单修复将使用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; 
}

来源

2016-05-15 11:38:01 claudios

我有没有柔性的解决方案。你只需要为.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>

来源

2016-05-18 20:39:15

坐在导航栏外的品牌形象

回答

相关问题