Bootstrap的v4 btn-outline-primary不起作用

时间：2018-02-19 08:31:24

标签： html css iphone twitter-bootstrap bootstrap-4

Bootstrap的v4 btn-outline-primary在我的iPhone上查看时无法在导航链接上运行，但在我的笔记本电脑和桌面屏幕上查看时效果很好（虽然没有轮廓，但是没有轮廓）。我环顾四周，没有找到任何特定于此的解决方案。我正在使用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，否则一切正常。在响应模式下，没有突出显示按钮或带颜色的链接。

1 个答案:

答案 0 :(得分：1)

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>

相关问题
最新问题