Question

我目前无法在台式机上获取徽标和菜单，我需要向右向左显示徽标，而在移动显示顶部菜单上的徽标在此处将代码居中对齐

<nav class="navbar navbar-expand" id="mainNav">
  <div class="container">
    <a class="navbar-brand" href="#"><img src="assets/new_images/logo1.png" width="210px"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">

            <li class="nav-item">
              <a class="nav-link" href="help.php">help</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="status.php">STATUS</a>
            </li>

            <li class="nav-item">
              <a class="nav-link" href="logout.php">LOGOUT</a>
            </li>

      </ul>
    </div>
  </div>
</nav>

Answer 1

签出flexbox with bootstrap 4您可以将默认（从最小尺寸）设置为sm / md / lg / xl屏幕尺寸为flex-column，然后将其设置为flex-sm-row（在此示例中），我使用较小的屏幕尺寸。）

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark flex-column flex-sm-row">
  <!-- Brand/logo -->
  <a class="navbar-brand" href="#">Logo</a>
  
  <!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 3</a>
    </li>
  </ul>
</nav>
</body>

台式机和移动导航栏品牌顶部菜单中心的左侧Bootstrap 4 Navbar品牌徽标和右侧菜单

1 个答案: