Question

我添加了从W3school获得的导航栏，但是当我将其添加到代码中时，导航栏太宽了，我不确定在哪里可以设置导航栏的宽度或高度。

我的index.html：

<html>
  <head>
    <meta charset="utf-8">
    <title>Tradeshift</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="http://www.w3schools.com/lib/w3.css" rel="stylesheet"/>
    <script src="http://www.w3schools.com/lib/w3data.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <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.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  </head>

  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">WebSiteName</a>
      </div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li>
          </ul>
        </li>
        <li><a href="#">Page 2</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </nav>

<!-- original img src https://ok2static.oktacdn.com/bc/image/fileStoreRecord?id=fs0d6gmquuO9LX87h0x7 -->
  <div class="jumbotron text-center "> <!--jumbotron is displayed as a grey box with rounded corners. It also enlarges the font sizes of the text inside it.-->
<h1> <img src="https://ok2static.oktacdn.com/bc/image/fileStoreRecord?id=fs0d6gmquuO9LX87h0x7" alt="nothing" border="0">
  <p class="lead">Built on JS/CSS</p><h1>
    <p class="lead"> AJX v1.031018</p>
</div>
  <body>


    <fieldset>
      <div class="text-center">
      <legend>Sign in</legend>

      <div>
        <!--  <label for="userName">Username:</label> -->
          <input type="text" id="username" name="username"
                 required placeholder ="Username"/>
      </div>

      <div>
        <!--  <label for="password">Password:</label> -->
          <input type="password" id="password" name="password"
                 minlength="8" required
                 placeholder="Password" />

    </div>

    <div>
      <form action ="main.html">
        <input type="submit" value="Sign in">
        <div id="button"><a href="register">Register</a></div>
      <!--  <input type="submit" value ="Register" a href ="register"></a> -->
    <!--  <form action="register">
      <input type="submit" value="Register">
    </form> -->
      </form>
    </div>

  </fieldset>

</div>
<script>
w3IncludeHTML();

</script>

  </body>
</html>

Answer 1

面临此问题的原因是您同时使用了Bootstrap 3和Bootstrap 4。

由于您使用的元素属于Bootstrap 3，因此删除Bootstrap 4的链接将为您提供帮助。

这是删除了Bootstrap 4的代码。

<html>
  <head>
    <meta charset="utf-8">
    <title>Tradeshift</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="http://www.w3schools.com/lib/w3.css" rel="stylesheet"/>
    <script src="http://www.w3schools.com/lib/w3data.js"></script>
    <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.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  </head>

  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">WebSiteName</a>
      </div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li>
          </ul>
        </li>
        <li><a href="#">Page 2</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </nav>

<!-- original img src https://ok2static.oktacdn.com/bc/image/fileStoreRecord?id=fs0d6gmquuO9LX87h0x7 -->
  <div class="jumbotron text-center "> <!--jumbotron is displayed as a grey box with rounded corners. It also enlarges the font sizes of the text inside it.-->
<h1> <img src="https://ok2static.oktacdn.com/bc/image/fileStoreRecord?id=fs0d6gmquuO9LX87h0x7" alt="nothing" border="0">
  <p class="lead">Built on JS/CSS</p><h1>
    <p class="lead"> AJX v1.031018</p>
</div>
  <body>


    <fieldset>
      <div class="text-center">
      <legend>Sign in</legend>

      <div>
        <!--  <label for="userName">Username:</label> -->
          <input type="text" id="username" name="username"
                 required placeholder ="Username"/>
      </div>

      <div>
        <!--  <label for="password">Password:</label> -->
          <input type="password" id="password" name="password"
                 minlength="8" required
                 placeholder="Password" />

    </div>

    <div>
      <form action ="main.html">
        <input type="submit" value="Sign in">
        <div id="button"><a href="register">Register</a></div>
      <!--  <input type="submit" value ="Register" a href ="register"></a> -->
    <!--  <form action="register">
      <input type="submit" value="Register">
    </form> -->
      </form>
    </div>

  </fieldset>

</div>
<script>
w3IncludeHTML();

</script>

  </body>
</html>

Answer 2

尝试以下代码-我删除了不需要的样式表，并且它起作用了。

<html>
  <head>
    <meta charset="utf-8">
    <title>Tradeshift</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="http://www.w3schools.com/lib/w3.css" rel="stylesheet"/>
    <script src="http://www.w3schools.com/lib/w3data.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <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.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  </head>

  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">WebSiteName</a>
      </div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li>
          </ul>
        </li>
        <li><a href="#">Page 2</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </nav>

<!-- original img src https://ok2static.oktacdn.com/bc/image/fileStoreRecord?id=fs0d6gmquuO9LX87h0x7 -->
  <div class="jumbotron text-center "> <!--jumbotron is displayed as a grey box with rounded corners. It also enlarges the font sizes of the text inside it.-->
<h1> <img src="https://ok2static.oktacdn.com/bc/image/fileStoreRecord?id=fs0d6gmquuO9LX87h0x7" alt="nothing" border="0">
  <p class="lead">Built on JS/CSS</p><h1>
    <p class="lead"> AJX v1.031018</p>
</div>
  <body>


    <fieldset>
      <div class="text-center">
      <legend>Sign in</legend>

      <div>
        <!--  <label for="userName">Username:</label> -->
          <input type="text" id="username" name="username"
                 required placeholder ="Username"/>
      </div>

      <div>
        <!--  <label for="password">Password:</label> -->
          <input type="password" id="password" name="password"
                 minlength="8" required
                 placeholder="Password" />

    </div>

    <div>
      <form action ="main.html">
        <input type="submit" value="Sign in">
        <div id="button"><a href="register">Register</a></div>
      <!--  <input type="submit" value ="Register" a href ="register"></a> -->
    <!--  <form action="register">
      <input type="submit" value="Register">
    </form> -->
      </form>
    </div>

  </fieldset>

</div>
<script>
w3IncludeHTML();

</script>

  </body>
</html>

Answer 3

您可以使用 CSS

更改导航栏宽度

.navbar{width: 50%;}

导航栏太宽

3 个答案: