css - Bootstrap - 响应式导航栏品牌

Question

有没有办法让大屏幕上的品牌文字在左侧，然后在小屏幕上居中？我正在使用这个 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;
}

Answer 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