时间戳

首页 > 解决方案 > Bootstrap flex-grow-0 类无法在我的导航栏中实现其目的

html - Bootstrap flex-grow-0 类无法在我的导航栏中实现其目的

问题描述

我的网页有一个导航栏，目前看起来像这样

代码输出的图像示例

现在我写的代码是：

<nav class="navbar navbar-expand-sm fixed-top bg-white">
  <div class="container my-2">
    <a href="/" class="navbar-brand text-dark font-weight-bold">Rakshit Deshmukh</a>

    <button class="btn btn-outline-info ml-auto">Contact Me</button>

    <button class="navbar-toggler" data-toggle="collapse" data-target="#collapseNav">
      <span class="fas fa-bars text-dark"></span>
    </button>

    <div class="collapse navbar-collapse flex-grow-0" id="collapseNav">
      <div class="navbar-nav">
        <a href="#" class="nav-item nav-link text-dark h6 mx-3">Blogs</a>
      </div>
    </div>
  </div>
</nav>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

对于 ID 为 collapseNav 的 div，我去了 Inspect Element，即使存在 flex-grow-0 类，inspect 元素说 flex-grow 值为 1。请帮我解决我哪里出错了！

标签： htmlcssbootstrap-4

解决方案

问题出在 CDN 上——我似乎使用了错误的 CDN。

    <nav class="navbar navbar-expand-sm fixed-top bg-white">
      <div class="container my-2">
        <a href="/" class="navbar-brand text-dark font-weight-bold">Rakshit Deshmukh</a>

        <button class="btn btn-outline-info ml-auto">Contact Me</button>

        <button class="navbar-toggler" data-toggle="collapse" data-target="#collapseNav">
          <span class="fas fa-bars text-dark"></span>
        </button>

        <div class="collapse navbar-collapse flex-grow-0" id="collapseNav">
          <div class="navbar-nav">
            <a href="#" class="nav-item nav-link text-dark h6 mx-3">Blogs</a>
          </div>
        </div>
      </div>
    </nav>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

推荐阅读