坐在導航欄外的品牌形象

我想將我的圖片放在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

坐在導航欄外的品牌形象

回答

相關問題