Question

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

＆＃13;

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

＆＃13;

Answer 1

您可以在.navbar-brand上使用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>

OUT

Answer 2

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

＆＃13;

@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;
}

＆＃13;

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

＆＃13;

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

Answer 4

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

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

坐在导航栏外面的品牌形象

5 个答案: