Так что моя проблема в том, что Bootstrap не работает для моего HTML кода. Вот немного моего кода:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> <link rel="stylesheet" href="style.css"> <title>Test</title> </head> <body> <div align="center" style=""> <h1 style="font-size: 112px;">Test</h1> </div> <nav> <div style="position: relative; left: 650px;"class="dropdown"> <a href="index.html"><button class="dropbtn">Test</button></a> <div style="position relative; left: -30px;"class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> <a href="#">Link 4</a> <a href="#">Link 5</a> <a href="#">Link 6</a> </div> </div> </body>
Когда вы изменяете размер страницы, единственное, что тоже изменяет размер, это только Большой тест. Я что-то не так делаю?
Есть много пропущенных / неправильных тегов, таких как <nav> и <div>.
<nav>
<div>.
Если вы хотите применить стиль к своему элементу, вы можете сделать это, используя внешняя таблица стилей. Встроенная таблица стилей не рекомендуется.
включает Bootstrap JavaScript и другие файлы JS в конце тега body, а не в заголовке.
Go для документов для получения дополнительной информации.
Я отформатировал код и также включил внешнюю таблицу стилей, которая может вам помочь.
body{ background-color: #ccc; }
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <link rel="stylesheet" href="style.css"> <title>Test</title> </head> <body> <div class="container"> <div class="allign-center"> <h1 class="h1">Test</h1> </div> <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown button </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> </body>