一些引导类不起作用（引导 4、导航栏和 bg-）答案

【问题标题】：Some bootstrap classes are not working (Bootstrap 4, Navbar and bg-)一些引导类不起作用（引导 4、导航栏和 bg-）
【发布时间】：2018-01-20 02:16:24
【问题描述】：

我正在构建一个导航栏，并且我已将 cdn 用于引导程序（css 和 js/popper）。使用这些类时，有些工作，有些不工作（d-inline、d-inline-block 工作，而 navbar-inverse 和 bg-inverse 不工作。）无论屏幕大小或浏览器如何，菜单都保持折叠到汉堡菜单.我试过从引导程序复制示例代码，看看我是否拼错了东西，但该代码有同样的问题。我已经尝试添加 navbar-expand-lg 类，但它并没有改变任何东西。我也清除了我的缓存无济于事。感谢您的帮助。

我使用的示例代码是

    <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

但是它也不适用于此代码：

<nav class="navbar navbar-default" style="background-color: blue;">
            <a class="navbar-brand" href="/">[SITE LOGO]</a>
            <a class="nav-item nav-link" href="/tire-dealers.php">Tire Dealers</a>
            <a class="nav-item nav-link" href="/why-used.php">Why Used?</a>
            <a class="nav-item nav-link" href="/tire-knowledge.php">Tire Knowledge</a>
            <a class="nav-item nav-link" href="/tire-products.php">Tire Products</a>
            <a class="nav-item nav-link" href="/contact-us.php">Contact Us</a>
        </nav>

我正在使用以下引导 cdn：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

我的完整代码是：

<!DOCTYPE html>

<html>
    <head>
    <title>[SITE TITLE]</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

<style>
    form#search > div.d-inline-block {
        width: 23% !important; 
        margin: .5% !important;
    }

    form#search > div.d-inline-block > label, form#search > div.d-inline-block > select {
        width: 100% !important;
    }

    h2.text-center {
        border-bottom: solid black;
    }

</style>
    </head>
    <body>
    <div class="container-fluid">
        <!-- Original Navbar that wasn't working: 
<nav class="navbar navbar-default" style="background-color: blue;">
            <a class="navbar-brand" href="/">[SITE LOGO]</a>
            <a class="nav-item nav-link" href="/tire-dealers.php">Tire Dealers</a>
            <a class="nav-item nav-link" href="/why-used.php">Why Used?</a>
            <a class="nav-item nav-link" href="/tire-knowledge.php">Tire Knowledge</a>
            <a class="nav-item nav-link" href="/tire-products.php">Tire Products</a>
            <a class="nav-item nav-link" href="/contact-us.php">Contact Us</a>
        </nav>  
        -->
<!-- Sample navbar that isn't working-->
    <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

        <div class="main-content">
            <h2 class="text-center font-weight-bold">Search For My Tires</h2>
            <form id="search">
                <div class="d-inline-block">
                        <label for="width-search" class="d-block text-center font-weight-bold">Width</label>
                    <select id="width-search" name="width-search" class="d-block">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                    </select>
                </div>
                <div class="d-inline-block">
                    <label for="aspect-search" class="d-block text-center font-weight-bold">Aspect</label>
                    <select id="aspect-search" name="aspect-search" class="d-block">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                    </select>
                </div>
                <div class="d-inline-block">
                    <label for="rim-search" class="d-block text-center font-weight-bold">Rim</label>
                    <select id="rim-search" name="rim-search" class="d-block">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                    </select>
                </div>
                <div class="d-inline-block">
                    <label for="qty-search" class="d-block text-center font-weight-bold">Quantity</label>
                    <select id="qty-search" name="qty-search" class="d-block">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                    </select>
                </div>

            </form>
        </div>
    </div>
    </body>
</html>

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

黑客，

我有一个使用 Bootsrap 4 nav 的项目，所以我复制了您的整个代码并将其放在我的文本编辑器中以并排比较项目。在 Chrome 中，为我调整浏览器大小时导航没有展开和折叠，所以我将我在项目的导航标签中使用的类放入您的代码中，它可以工作！

代替：

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">

我把我的课程放在你的代码中：

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">

也许将其弹出并从那里开始，也可以考虑将脚本向下移动到结束正文标记之前的底部。

【讨论】：