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

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

Bootstrap - 响应式Navbar-Brand

2 个答案: