Bootstrap的v4 btn-outline-primary不起作用(Bootstrap's v4 btn-outline-primary doesn't work)
在我的iPhone上查看时，Bootstrap的v4 btn-outline-primary在导航链接上不起作用，但在我的笔记本电脑和桌面屏幕上查看时，工作正常（虽然没有轮廓，但仍然很实用）。 我环顾四周，并没有找到任何具体的解决方案。 我正在使用Bootstrap 4.0.0。
HTML是：
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" 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-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
</head>
<body>
<!-- START NAVBAR -->
<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-outline-primary" href="/">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link btn-outline-primary" href="/bio">Bio</a>
</li>
<li class="nav-item">
<a class="nav-link btn-outline-primary" href="/history">Resume´</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link 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>
<!-- END NAVBAR -->
<!-- START JUMBOTRON -->
<div class="jumbotron jumbotron-fluid">
<div class="container">
<div class="row">
<div class="col titleDiv">
<h1 class="line1">RON SMITH</h1>
<p class="line2">JavaScript Is Cool</p>
</div>
</div>
</div>
</div>
<!-- END JUMBOTRON -->
<!-- START FOOTER -->
{{>footer}}
<!-- END FOOTER -->
<script src="../js/jquery.slim.min.js"></script>
<script src="../js/popper.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</body>
除了在iPhone上点击时，一切正常。 在响应模式下没有突出显示该按钮或与颜色链接。
Bootstrap's v4 btn-outline-primary doesn't work on the nav links when viewed on my iPhone, but works fine (albeit solid without outline) when viewed on my laptop and desktop screens. I looked around and didn't find any solutions specific to this. I'm using Bootstrap 4.0.0.
HTML is:
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" 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-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
</head>
<body>
<!-- START NAVBAR -->
<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-outline-primary" href="/">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link btn-outline-primary" href="/bio">Bio</a>
</li>
<li class="nav-item">
<a class="nav-link btn-outline-primary" href="/history">Resume´</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link 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>
<!-- END NAVBAR -->
<!-- START JUMBOTRON -->
<div class="jumbotron jumbotron-fluid">
<div class="container">
<div class="row">
<div class="col titleDiv">
<h1 class="line1">RON SMITH</h1>
<p class="line2">JavaScript Is Cool</p>
</div>
</div>
</div>
</div>
<!-- END JUMBOTRON -->
<!-- START FOOTER -->
{{>footer}}
<!-- END FOOTER -->
<script src="../js/jquery.slim.min.js"></script>
<script src="../js/popper.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</body>
Everything works fine except when tapping on iPhone. There's no highlighting of the button or links with color in responsive mode.
最满意答案
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>
更多推荐
发布评论