Question

我试图将我的徽标和文字排在同一条线上，由于某种原因它没有发生。我正在努力的另一件事是，当我调整窗口大小时，我右侧的文字消失了。 HTML：

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container-fluid">
        <div class="navbar-header">
        <div class = "logo">
        <img src="Images/logo.png" class="img-responsive"/>
        <h1> Logo </h1>
        </div> 
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
              <p>
            Need something ? <a href="#" role="link" id="account_btn">Create it now</a>
            </p>
          </ul>
        </div>
      </div>
</div>

CSS：

body {
    background-image: url("Images/a.jpg");
    padding-top: 58px;
}

.navbar-brand{
     margin-left:50px !important;
}

.logo {
    margin-left: 70px;
    margin-top: 40px;
}

.logo h1 {
    display: inline-block;
    padding-left: 10px;
}


.navbar-right {
    margin-top: 63px;
    margin-right: 20px;
}

Answer 1

对display: inline-block和img使用h4。

这是小提琴https://jsfiddle.net/zy8tdbtu/

.logo img{
  display: inline-block;
  vertical-align: middle;
}
.logo h1{
    display: inline-block;
    color: #fff;
    vertical-align: middle;
    margin: 0;
    font-size: 24px;
}

<强>更新

是bcoz你是否使用了collapse类，当你缩小屏幕时隐藏navbar-right。删除该课程。

这是更新的小提琴：https://jsfiddle.net/zy8tdbtu/1/

Answer 2

我的建议是实际使用 Bootstrap 的GRID系统。这就是为什么它对构建响应式设计如此强大的原因。我通过在标头中插入col间距来解决您的问题，例如：col-md-8 col-xs-8和col-md-4 col-xs-4。我的建议是阅读有关如何实际使用列的信息。

Fiddle 1

Answer 3

这只是您右侧的导航链接，可以折叠到汉堡菜单中进行移动导航。你看不到汉堡包，因为它在黑色背景上是黑色的。

Answer 4

我建议你在研究这些类名时研究bootstrap（以及任何其他css框架）实际上在做什么。您添加了navbar-collapse，它会隐藏导航栏并将其显示为汉堡包菜单（如果标记在那里）而不知道它的作用，从而导致您的混淆。

http://getbootstrap.com/components/#navbar

CSS框架是很好的工具，当你真正了解幕后发生的事情时

徽标文字与图片对齐

4 个答案: