Bootstrap - 响应式导航栏品牌答案

【问题标题】：Bootstrap - Responsive Navbar-BrandBootstrap - 响应式导航栏品牌
【发布时间】：2017-01-15 02:24:07
【问题描述】：

有没有办法让品牌文字在大屏幕上位于左侧，然后在小屏幕上居中？我正在使用此 atm 将其居中，但它使用宽度，因此整个栏是一个链接。

<a href="" target="blank" class="navbar-brand">Name of App</a>

.navbar-brand {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    text-align: center;
    margin: auto;
}
.navbar-toggle {
    z-index: 3;
}

【问题讨论】：

使用@media 查询的样式。

标签： css center navbar

【解决方案1】：

检查这个 css 并利用媒体查询在不同的屏幕尺寸上应用不同的 css

@media(max-width: 767px) {
  .navbar-brand {
    position: absolute;
    width: 30%;
    left: 0;
    top: 0;
    text-align: left;
    margin: auto;
  }

}

@media(min-width: 768px) {
  .navbar-brand {
    position: absolute;
    width: 30%;
    left: 0;
    top: 0;
    text-align: center;
    margin: auto;
    color: orange;

  }
  .nav.navbar-nav {
    margin-left: 30%;
  }

}

JSFIDDLE

【讨论】：

:) 无论如何很乐意提供帮助
不小心删除了那个:) 谢谢

【解决方案2】：

谢谢你 :) 真的要评论说我已经用这个排序了

    @media (max-width: 768px) {
    .navbar-brand {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    text-align: center;
    margin: auto;
}
.navbar-toggle {
    z-index: 3;
}
}

【讨论】：