如何使用媒体查询让Bootstrap 4.1的导航栏品牌名居中？

嘿，我看到你在尝试用媒体查询让导航栏里的品牌名居中，但你的CSS写法确实存在语法和选择器的问题，咱们一步步来搞定它～

首先，先指出你原来CSS的错误：

• 媒体查询的语法不完整，缺少包裹样式的大括号{}，浏览器根本无法识别这个规则
• 选择器定位错了，你要居中的是.navbar-brand，而不是整个.navbar容器
• Bootstrap的导航栏默认是Flex布局，直接用text-align: center可能不生效，需要配合宽度设置

方法一：用自定义CSS实现（灵活可控） #

首先给你的导航栏加一个自定义类，方便我们做针对性样式修改，然后修正媒体查询的写法：

修正后的HTML

<nav class="navbar navbar-expand-sm navbar-dark bg-dark custom-navbar">
  <a class="navbar-brand" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" href="#">Brand Name</a>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Sign Up</a>
      </li>
      <li class="nav-item">
        <a class="nav-link " href="#">About</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown">Contact</a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Phone</a>
          <a class="dropdown-item" href="#">Email</a>
          <a class="dropdown-item" href="#">Social</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

修正后的CSS

/* 针对小屏幕（小于576px，Bootstrap sm断点）让品牌名居中 */
@media (max-width: 575.98px) {
  .custom-navbar .navbar-brand {
    text-align: center;
    width: 100%; /* 让品牌名占满导航栏宽度，确保文字居中生效 */
  }
}

/* 如果你希望在>=320px的所有屏幕都居中，就替换成这个媒体查询 */
/* @media (min-width: 320px) {
  .custom-navbar .navbar-brand {
    text-align: center;
    width: 100%;
  }
} */

方法二：用Bootstrap内置类实现（更简洁） #

Bootstrap提供了很多响应式工具类，不用写自定义CSS就能实现需求：

<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
  <!-- 用text-center和w-100让小屏幕下品牌名居中，d-sm-inline和w-auto让大屏幕恢复原布局 -->
  <a class="navbar-brand text-center w-100 d-sm-inline w-auto" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" href="#">Brand Name</a>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Sign Up</a>
      </li>
      <li class="nav-item">
        <a class="nav-link " href="#">About</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown">Contact</a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Phone</a>
          <a class="dropdown-item" href="#">Email</a>
          <a class="dropdown-item" href="#">Social</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

这个方法的原理是：

• text-center w-100：在小屏幕下让品牌名文字居中，并且占满整个导航栏宽度
• d-sm-inline w-auto：在>=576px的屏幕上，把品牌名恢复成inline元素，宽度自适应，保持原来的靠左布局，菜单依然靠右

内容的提问来源于stack exchange，提问作者scriptTease