Question

编辑＃1：这是问题的图片：

编辑＃2：这是我使用品牌类后的图片

编辑＃3：

我正试图在导航栏旁边浮动图像。它一直有效，直到我的导航栏宽度为100％。然后导航栏位于图像下方。

这是我的HTML：

<nav class="navbar navbar-default navbar-static-top">
    <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">
            <img alt="Brand" class="pull-left" src="Images/logo.png">
          </a>
        </div>
        <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
        <span class="icon-bar"></span>
        </button>
        <div class="collapse navbar-collapse navHeaderCollapse">
            <ul class="nav navbar-nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">Internet</a></li>
                <li><a href="#">Phone</a></li>
                <li><a href="#">Android TV</a></li>
                <li><a href="#">Shaw Direct</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
    </div>  
    </div>
</nav>

这是我的CSS：

.Navlinks {
    font-size: 24px;
    color: white;
    padding-top: 50%;
    vertical-align: middle;
}
.Navlinks:hover {
    color: white;
}
.Navlinks:focus {
    color: white;
}
.navbar-default {
    background-color: #00AEFE;
    height: 89px;
}

.nav.navbar-nav li a{
    color: white;
    font-size: 18px;
}

有没有办法确保这两个可以并排浮动？

Answer 1

官方文档中有一个例子：

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
      </a>
    </div>
  </div>
</nav>

https://getbootstrap.com/components/#navbar-brand-image

Answer 2

此答案基于@Serg Chernata答案

您的徽标必须是透明的，如果徽标大于您想要的徽标，则可能需要css样式width或height到<img>标记。像navbar-brand > img {height: 40px;}

这样的东西

您也应该将<button>移动到<div class="navbar-header">到移动设备中导航栏切换按钮的正确位置。

＆＃13;

.Navlinks {
  font-size: 24px;
  color: white;
  padding-top: 50%;
  vertical-align: middle;
}
.Navlinks:hover {
  color: white;
}
.Navlinks:focus {
  color: white;
}
.navbar-default {
  background-color: #00AEFE;
  height: 89px;
}
.nav.navbar-nav li a {
  color: white;
  font-size: 18px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" class="pull-left" src="Images/logo.png">
      </a>
      <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="collapse navbar-collapse navHeaderCollapse">
      <ul class="nav navbar-nav">
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">Internet</a>
        </li>
        <li><a href="#">Phone</a>
        </li>
        <li><a href="#">Android TV</a>
        </li>
        <li><a href="#">Shaw Direct</a>
        </li>
        <li><a href="#">Contact Us</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

＆＃13;

将图像放在Navbar Bootstrap旁边

2 个答案: