Слишком широкий Навбар - PullRequest
       1

Слишком широкий Навбар

0 голосов
/ 08 октября 2018

Я добавил навигационную панель, которую получил от W3school, но когда я добавляю ее в свой код, панель становится слишком широкой, и я не уверен, где можно установить ширину или высоту навигационной панели.

http://jsfiddle.net/dkx018no/

Мой 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>

Ответы [ 3 ]

0 голосов
/ 08 октября 2018

Причина, по которой вы столкнулись с этой проблемой, заключается в том, что вы используете как 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>
0 голосов
/ 08 октября 2018

Вы можете просто изменить ширину панели навигации с помощью CSS

.navbar{width: 50%;}
0 голосов
/ 08 октября 2018

Попробуйте следующий код - я удалил ненужные таблицы стилей, и это сработало.

<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>
...