Azure VIP交换停机时间(Azure VIP Swap downtime)

 btn-outline-primary类不是按照你使用它的方式来设计的。 所以，说它“正常工作”意味着你误解了它应该如何工作的原因，因为根据你的代码产生的当前行为，它不能 “正常”工作。 
 
 为了让btn-outline-primary类以它应该被使用和使用的方式工作，你需要添加btn类，如下面的代码片段所示。 换句话说， btn是btn-outline-primary正常工作所必需的 ，即使你以这种方式获得的效果可能不是你想要的效果。 
 
 这是代码片段（点击下面的“运行代码片段”并展开到整个页面）： 
 
 
 
 
 
  
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 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.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
    <div class="container">  <!-- ADDED DIV TO MANIPULATE POSITIONS OF "navbar-brand" and "navbar-nav", the ul -->
        <span class="navbar-brand mb-0 h1">JavaScript Is Cool</span>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarsExampleDefault">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item">  <!-- removed .active -->
                    <a class="nav-link btn btn-outline-primary" href="/">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link btn btn-outline-primary" href="/bio">Bio</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link btn btn-outline-primary" href="/history">Resume´</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link btn dropdown-toggle btn-outline-primary" href="" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
                    <div class="dropdown-menu" aria-labelledby="dropdown01">
                        <a class="dropdown-item" href="#">Coming Soon</a>
                        <a class="dropdown-item" href="#">Coming Soon</a>
                        <a class="dropdown-item" href="#">Coming Soon</a>
                    </div>
                </li>
            </ul>
            <!-- REMOVED THE SEARCH FORM -->
            <!-- <form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form> -->
        </div>
    </div> <!-- END ADDED DIV -->
</nav>
 
 
 
 

The btn-outline-primary class is not designed to be used the way you were using it. So, saying that it "works fine" means you misunderstood how it was supposed to work in the first place because based on the current behavior resulting from your code, it does NOT work "fine".
 
To make the btn-outline-primary class work the way it's supposed to be used and work, you need to add the btn class additionally to that as shown in the code snippet below. In other words, btn is required for btn-outline-primary to work properly even though the effect you get that way might not be the effect you were going for.
 
Here's the code snippet (click "run code snippet" below and expand to full page):
 
 
 
 
 
  
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 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.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
    <div class="container">  <!-- ADDED DIV TO MANIPULATE POSITIONS OF "navbar-brand" and "navbar-nav", the ul -->
        <span class="navbar-brand mb-0 h1">JavaScript Is Cool</span>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarsExampleDefault">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item">  <!-- removed .active -->
                    <a class="nav-link btn btn-outline-primary" href="/">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link btn btn-outline-primary" href="/bio">Bio</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link btn btn-outline-primary" href="/history">Resume´</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link btn dropdown-toggle btn-outline-primary" href="" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
                    <div class="dropdown-menu" aria-labelledby="dropdown01">
                        <a class="dropdown-item" href="#">Coming Soon</a>
                        <a class="dropdown-item" href="#">Coming Soon</a>
                        <a class="dropdown-item" href="#">Coming Soon</a>
                    </div>
                </li>
            </ul>
            <!-- REMOVED THE SEARCH FORM -->
            <!-- <form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form> -->
        </div>
    </div> <!-- END ADDED DIV -->
</nav>