Question

我出于某种原因无法将Navbar切换按钮置于中心位置。有多个线程与此问题有关，但由于某种原因我无法得到它。一些直接的帮助将是有用的！

我有以下专用于该按钮的CSS：

          .navbar-toggle {
            width: 100%;
            float: none;
            margin: auto;
            border-width:0;
            border-radius:0;
            }
            .navbar-header {
              text-align:center;
              }

当屏幕较小时，以下HTML专用于按钮：

<div class="navbar-header">

                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

                  <span class="sr-only"> Toggle Navigation </span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>

                </button>
        </div>

以下是完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Website Title</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link href="https://fonts.googleapis.com/css?family=Petit+Formal+Script" rel="stylesheet">

  <style>

      img {
      display: block;
      margin: 0 auto;
      }

      h1 {
        font-family: 'Lora', serif;
        color:#453d51;
        text-align:center;
        font-size:40px;
      }

      .subtitle {
        font-family: 'Petit Formal Script', cursive;
        font-size:60px;
        text-align:center;
        letter-spacing:2px;

      }

      .navbar-default {
        background-color: white;
        font-family: 'Lora', serif;
        font-size: 20px;
        padding-left:2px;
        padding-right: 2px;

      }

      .navbar-toggle {
        width: 100%;
        float: none;
        margin: auto;
        border-width:0;
        border-radius:0;
        }
        .navbar-header {
          text-align:center;
          }

  </style>

</head>


<body>



  <div class="navbar navbar-default navbar-fixed-top" role="navigation">

    <div class="container">

        <div class=container>
          <img src="C:\Users\mmosl\OneDrive\DOCUMENTS\Portfolio\Logo\logo.png" margin="0" href="index.html" width=25% height=25%>
          <h1> a portfolio by </h1>
          <p class=subtitle> mrs. slater </p>
        </div>

        <div class="navbar-header">

            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

              <span class="sr-only"> Toggle Navigation </span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>

            </button>
    </div>
  </nav>

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

我会提供网站但不是直播。以下是截图：https://drive.google.com/open?id=0B_6fmXn_TvcrOS03emFFemVlVEk

Center Navbar切换按钮（Bootstrap 3）

0 个答案: