如何在 Bootstrap 滚动条的一行中对齐不同的 HTML 元素？
How to align different HTML element on a row in a Bootstrap scrollbar?
我正在为我的 web 应用程序的前端而苦苦挣扎，我使用了 Bootstrap 和一些自定义的 css 定义来进行一些改编；桌面界面还可以，但对于智能手机，导航栏仍然存在问题，因此当您单击以滚动菜单时，按钮不会在一条线上全部居中对齐。
为了更好地理解，我附上了界面现在的样子的照片 1 and how I aim to make it happen 2.
下面是使用的代码：
body {
background-color: black;
font-family: "Futura-CondensedExtraBold", sans-serif;
font-weight: bold;
background-image: url("wallpaper.png");
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.navbar{
background-color: #000b29;
width: 100%;
}
.input-field-warn{
color: orangered;
font-size: small;
}
.input-field-ok{
color: forestgreen;
font-size: small;
}
.btn-home{
border-radius: 10%;
background-color: darkgrey;
border-color: white;
border-width: medium;
font-weight: bold;
margin-left: 2%;
color: #222222;
font-size: 1.5vw;
width: 12.5vw;
height: calc(3.2vw + 10px);
overflow: hidden;
white-space: nowrap;
}
.btn-home:hover{
background-color: #525252;
}
.row-1{
margin-top: 2%;
margin-left: 10%;
text-decoration: underline;
text-underline-offset: 20%;
color: white;
}
.home-box{
background: rgba(0, 0, 0, 0.5);
margin-left: 10%;
padding: 3%;
border-radius: 5%;
font-size: calc(0.7vw + 0.55vh);
color: #ffffff;
border: solid white;
}
.home-box-1{
width: 35%;
margin-top: 2.5%;
}
.home-box-2{
width: 55%;
margin-top: 5%;
}
.home-box-3{
width: 40%;
margin-top: 5%;
}
.home-box-4{
width: 80%;
margin-top: 2.5%;
}
.button-img{
margin-left: 10%;
height: 1.5vw;
width: 1.5vw;
}
#main-container{
width: 99vw;
height: 100%;
}
#login-form{
align-content: center;
padding: 5%;
}
#logo-home{
margin-left: 10%;
font-size: 2.5vw;
}
#info-img{
margin-left: 3%;
width: 5%;
height: 5%;
}
#home-navbar{
width: 100vw;
height: 10%;
}
#nav-container{
width: 100vw;
height: 10%;
}
#logo{
width: 2.5vw;
height: 2.5vw;
margin-bottom: 20%;
}
@media screen and (max-width: 992px) {
#home-button-container{
justify-content: center;
overflow: hidden;
white-space: nowrap;
width: 100%;
text-align: center;
}
.btn-home{
padding: 0;
margin: 0;
font-size: 2.5vw;
overflow: hidden;
white-space: nowrap;
display: inline-block;
}
.home-box-1{
width: 80%;
margin-top: 2.5%;
}
.home-box-2{
width: 80%;
margin-top: 5%;
}
.home-box-3{
width: 80%;
margin-top: 5%;
}
#navbarSupportedContent{
overflow: hidden;
white-space: nowrap;
}
}
<!doctype html>
<html lang="en">
<head>
<title>WhoIsOnline</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="index.js" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link href="indexStyle.css" rel="stylesheet">
<link rel="shortcut icon" href="icon.ico" type="image/x-icon">
</head>
<body onload="loadInfo()">
<div id="main-container">
<div id="nav-container">
<nav class="navbar py-3 navbar-expand-lg navbar-dark" id="home-navbar">
<div class="container-fluid">
<div id="logo-home">
<a class="navbar-brand" href="/">
<img src="LOGO%20WHOSONLINE.png" alt="Logo" id="logo">
</a>
</div>
<a class="navbar-brand" href="/">WhoIsOnline</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<div class="navbar-nav me-auto mb-2 mb-lg-0">
</div>
<div class="d-grid gap-2 d-md-flex justify-content-md-end" id="home-button-container">
<form action="/info" id="info-form"></form>
<button class="btn btn-primary me-md-2 btn-home" form="info-form" type="submit" onmouseover="changeColorImage(this, 'white')" onmouseout="changeColorImage(this, 'black')">Info<img src="info.png" class="button-img"></button>
<button class="btn btn-primary me-md-2 btn-home" type="button" data-toggle="modal" data-target="#ModalRegister" onmouseover="changeColorImage(this, 'white')" onmouseout="changeColorImage(this, 'black')">SignIn<img src="account.png" class="button-img"></button>
<button class="btn btn-primary me-md-2 btn-home" type="button" data-toggle="modal" data-target="#ModalLogIn" onmouseover="changeColorImage(this, 'white')" onmouseout="changeColorImage(this, 'black')">LogIn<img src="lock.png" class="button-img"></button>
</div>
</div>
</div>
</nav>
</div>
</div>
</body>
</html>
删除 #home-button-container 上的 d-grid class。 flex 和 grid 通常可以在布局中很好地协同工作。但在这种情况下，它会适得其反flex。
body {
background-color: black;
font-family: "Futura-CondensedExtraBold", sans-serif;
font-weight: bold;
background-image: url("wallpaper.png");
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.navbar {
background-color: #000b29;
width: 100%;
}
.input-field-warn {
color: orangered;
font-size: small;
}
.input-field-ok {
color: forestgreen;
font-size: small;
}
.btn-home {
border-radius: 10%;
background-color: darkgrey;
border-color: white;
border-width: medium;
font-weight: bold;
margin-left: 2%;
color: #222222;
font-size: 1.5vw;
width: 12.5vw;
height: calc(3.2vw + 10px);
overflow: hidden;
white-space: nowrap;
}
.btn-home:hover {
background-color: #525252;
}
.row-1 {
margin-top: 2%;
margin-left: 10%;
text-decoration: underline;
text-underline-offset: 20%;
color: white;
}
.home-box {
background: rgba(0, 0, 0, 0.5);
margin-left: 10%;
padding: 3%;
border-radius: 5%;
font-size: calc(0.7vw + 0.55vh);
color: #ffffff;
border: solid white;
}
.home-box-1 {
width: 35%;
margin-top: 2.5%;
}
.home-box-2 {
width: 55%;
margin-top: 5%;
}
.home-box-3 {
width: 40%;
margin-top: 5%;
}
.home-box-4 {
width: 80%;
margin-top: 2.5%;
}
.button-img {
margin-left: 10%;
height: 1.5vw;
width: 1.5vw;
}
#main-container {
width: 99vw;
height: 100%;
}
#login-form {
align-content: center;
padding: 5%;
}
#logo-home {
margin-left: 10%;
font-size: 2.5vw;
}
#info-img {
margin-left: 3%;
width: 5%;
height: 5%;
}
#home-navbar {
width: 100vw;
height: 10%;
}
#nav-container {
width: 100vw;
height: 10%;
}
#logo {
width: 2.5vw;
height: 2.5vw;
margin-bottom: 20%;
}
@media screen and (max-width: 992px) {
#home-button-container {
justify-content: center;
overflow: hidden;
white-space: nowrap;
width: 100%;
text-align: center;
}
.btn-home {
padding: 0;
margin: 0;
font-size: 2.5vw;
overflow: hidden;
white-space: nowrap;
display: inline-block;
}
.home-box-1 {
width: 80%;
margin-top: 2.5%;
}
.home-box-2 {
width: 80%;
margin-top: 5%;
}
.home-box-3 {
width: 80%;
margin-top: 5%;
}
#navbarSupportedContent {
overflow: hidden;
white-space: nowrap;
}
}
<!doctype html>
<html lang="en">
<head>
<title>WhoIsOnline</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="index.js" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="indexStyle.css" rel="stylesheet">
<link rel="shortcut icon" href="icon.ico" type="image/x-icon">
</head>
<body>
<div id="main-container">
<div id="nav-container">
<nav class="navbar py-3 navbar-expand-lg navbar-dark" id="home-navbar">
<div class="container-fluid">
<div id="logo-home">
<a class="navbar-brand" href="/">
<img src="LOGO%20WHOSONLINE.png" alt="Logo" id="logo">
</a>
</div>
<a class="navbar-brand" href="/">WhoIsOnline</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<div class="navbar-nav me-auto mb-2 mb-lg-0">
</div>
<div class="gap-2 ms-4 d-md-flex justify-content-md-end" id="home-button-container">
<form action="/info" id="info-form"></form>
<button class="btn btn-primary me-md-2 btn-home" form="info-form" type="submit" onmouseover="null" onmouseout="null">Info<img src="info.png" class="button-img"></button>
<button class="btn btn-primary me-md-2 btn-home" type="button" data-toggle="modal" data-target="#ModalRegister" onmouseover="null" onmouseout="null">SignIn<img src="account.png" class="button-img"></button>
<button class="btn btn-primary me-md-2 btn-home" type="button" data-toggle="modal" data-target="#ModalLogIn" onmouseover="null" onmouseout="null">LogIn<img src="lock.png" class="button-img"></button>
</div>
</div>
</div>
</nav>
</div>
</div>
</body>
</html>
您正在使用表单外的按钮 - 试试这个：
<form action="/info" id="info-form">
<button class="btn btn-primary me-md-2 btn-home" form="info-form" type="submit" onmouseover="changeColorImage(this, 'white')" onmouseout="changeColorImage(this, 'black')">Info<img src="info.png" class="button-img"></button>
<button class="btn btn-primary me-md-2 btn-home" type="button" data-toggle="modal" data-target="#ModalRegister" onmouseover="changeColorImage(this, 'white')" onmouseout="changeColorImage(this, 'black')">SignIn<img src="account.png" class="button-img"></button>
<button class="btn btn-primary me-md-2 btn-home" type="button" data-toggle="modal" data-target="#ModalLogIn" onmouseover="changeColorImage(this, 'white')" onmouseout="changeColorImage(this, 'black')">LogIn<img src="lock.png" class="button-img"></button>
</form>
body {
background-color: black;
font-family: "Futura-CondensedExtraBold", sans-serif;
font-weight: bold;
background-image: url("wallpaper.png");
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.navbar{
background-color: #000b29;
width: 100%;
}
.input-field-warn{
color: orangered;
font-size: small;
}
.input-field-ok{
color: forestgreen;
font-size: small;
}
.btn-home{
border-radius: 10%;
background-color: darkgrey;
border-color: white;
border-width: medium;
font-weight: bold;
margin-left: 2%;
color: #222222;
font-size: 1.5vw;
width: 12.5vw;
height: calc(3.2vw + 10px);
overflow: hidden;
white-space: nowrap;
}
.btn-home:hover{
background-color: #525252;
}
.row-1{
margin-top: 2%;
margin-left: 10%;
text-decoration: underline;
text-underline-offset: 20%;
color: white;
}
.home-box{
background: rgba(0, 0, 0, 0.5);
margin-left: 10%;
padding: 3%;
border-radius: 5%;
font-size: calc(0.7vw + 0.55vh);
color: #ffffff;
border: solid white;
}
.home-box-1{
width: 35%;
margin-top: 2.5%;
}
.home-box-2{
width: 55%;
margin-top: 5%;
}
.home-box-3{
width: 40%;
margin-top: 5%;
}
.home-box-4{
width: 80%;
margin-top: 2.5%;
}
.button-img{
margin-left: 10%;
height: 1.5vw;
width: 1.5vw;
}
#main-container{
width: 99vw;
height: 100%;
}
#login-form{
align-content: center;
padding: 5%;
}
#logo-home{
margin-left: 10%;
font-size: 2.5vw;
}
#info-img{
margin-left: 3%;
width: 5%;
height: 5%;
}
#home-navbar{
width: 100vw;
height: 10%;
}
#nav-container{
width: 100vw;
height: 10%;
}
#logo{
width: 2.5vw;
height: 2.5vw;
margin-bottom: 20%;
}
@media screen and (max-width: 992px) {
#home-button-container{
justify-content: center;
overflow: hidden;
white-space: nowrap;
width: 100%;
text-align: center;
}
.btn-home{
padding: 0;
margin: 0;
font-size: 2.5vw;
overflow: hidden;
white-space: nowrap;
display: inline-block;
}
.home-box-1{
width: 80%;
margin-top: 2.5%;
}
.home-box-2{
width: 80%;
margin-top: 5%;
}
.home-box-3{
width: 80%;
margin-top: 5%;
}
#navbarSupportedContent{
overflow: hidden;
white-space: nowrap;
}
}
<!doctype html>
<html lang="en">
<head>
<title>WhoIsOnline</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="index.js" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link href="indexStyle.css" rel="stylesheet">
<link rel="shortcut icon" href="icon.ico" type="image/x-icon">
</head>
<body onload="loadInfo()">
<div id="main-container">
<div id="nav-container">
<nav class="navbar py-3 navbar-expand-lg navbar-dark" id="home-navbar">
<div class="container-fluid">
<div id="logo-home">
<a class="navbar-brand" href="/">
<img src="LOGO%20WHOSONLINE.png" alt="Logo" id="logo">
</a>
</div>
<a class="navbar-brand" href="/">WhoIsOnline</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<div class="navbar-nav me-auto mb-2 mb-lg-0">
</div>
<div class="d-grid gap-2 d-md-flex justify-content-md-end" id="home-button-container">
<form action="/info" id="info-form">
<button class="btn btn-primary me-md-2 btn-home" form="info-form" type="submit" onmouseover="changeColorImage(this, 'white')" onmouseout="changeColorImage(this, 'black')">Info<img src="info.png" class="button-img"></button>
<button class="btn btn-primary me-md-2 btn-home" type="button" data-toggle="modal" data-target="#ModalRegister" onmouseover="changeColorImage(this, 'white')" onmouseout="changeColorImage(this, 'black')">SignIn<img src="account.png" class="button-img"></button>
<button class="btn btn-primary me-md-2 btn-home" type="button" data-toggle="modal" data-target="#ModalLogIn" onmouseover="changeColorImage(this, 'white')" onmouseout="changeColorImage(this, 'black')">LogIn<img src="lock.png" class="button-img"></button>
</form>
</div>
</div>
</div>
</nav>
</div>
</div>
</body>
</html>
我正在为我的 web 应用程序的前端而苦苦挣扎，我使用了 Bootstrap 和一些自定义的 css 定义来进行一些改编；桌面界面还可以，但对于智能手机，导航栏仍然存在问题，因此当您单击以滚动菜单时，按钮不会在一条线上全部居中对齐。
为了更好地理解，我附上了界面现在的样子的照片 1 and how I aim to make it happen 2.
下面是使用的代码：
body {
background-color: black;
font-family: "Futura-CondensedExtraBold", sans-serif;
font-weight: bold;
background-image: url("wallpaper.png");
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.navbar{
background-color: #000b29;
width: 100%;
}
.input-field-warn{
color: orangered;
font-size: small;
}
.input-field-ok{
color: forestgreen;
font-size: small;
}
.btn-home{
border-radius: 10%;
background-color: darkgrey;
border-color: white;
border-width: medium;
font-weight: bold;
margin-left: 2%;
color: #222222;
font-size: 1.5vw;
width: 12.5vw;
height: calc(3.2vw + 10px);
overflow: hidden;
white-space: nowrap;
}
.btn-home:hover{
background-color: #525252;
}
.row-1{
margin-top: 2%;
margin-left: 10%;
text-decoration: underline;
text-underline-offset: 20%;
color: white;
}
.home-box{
background: rgba(0, 0, 0, 0.5);
margin-left: 10%;
padding: 3%;
border-radius: 5%;
font-size: calc(0.7vw + 0.55vh);
color: #ffffff;
border: solid white;
}
.home-box-1{
width: 35%;
margin-top: 2.5%;
}
.home-box-2{
width: 55%;
margin-top: 5%;
}
.home-box-3{
width: 40%;
margin-top: 5%;
}
.home-box-4{
width: 80%;
margin-top: 2.5%;
}
.button-img{
margin-left: 10%;
height: 1.5vw;
width: 1.5vw;
}
#main-container{
width: 99vw;
height: 100%;
}
#login-form{
align-content: center;
padding: 5%;
}
#logo-home{
margin-left: 10%;
font-size: 2.5vw;
}
#info-img{
margin-left: 3%;
width: 5%;
height: 5%;
}
#home-navbar{
width: 100vw;
height: 10%;
}
#nav-container{
width: 100vw;
height: 10%;
}
#logo{
width: 2.5vw;
height: 2.5vw;
margin-bottom: 20%;
}
@media screen and (max-width: 992px) {
#home-button-container{
justify-content: center;
overflow: hidden;
white-space: nowrap;
width: 100%;
text-align: center;
}
.btn-home{
padding: 0;
margin: 0;
font-size: 2.5vw;
overflow: hidden;
white-space: nowrap;
display: inline-block;
}
.home-box-1{
width: 80%;
margin-top: 2.5%;
}
.home-box-2{
width: 80%;
margin-top: 5%;
}
.home-box-3{
width: 80%;
margin-top: 5%;
}
#navbarSupportedContent{
overflow: hidden;
white-space: nowrap;
}
}
<!doctype html>
<html lang="en">
<head>
<title>WhoIsOnline</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="index.js" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link href="indexStyle.css" rel="stylesheet">
<link rel="shortcut icon" href="icon.ico" type="image/x-icon">
</head>
<body onload="loadInfo()">
<div id="main-container">
<div id="nav-container">
<nav class="navbar py-3 navbar-expand-lg navbar-dark" id="home-navbar">
<div class="container-fluid">
<div id="logo-home">
<a class="navbar-brand" href="/">
<img src="LOGO%20WHOSONLINE.png" alt="Logo" id="logo">
</a>
</div>
<a class="navbar-brand" href="/">WhoIsOnline</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<div class="navbar-nav me-auto mb-2 mb-lg-0">
</div>
<div class="d-grid gap-2 d-md-flex justify-content-md-end" id="home-button-container">
<form action="/info" id="info-form"></form>
<button class="btn btn-primary me-md-2 btn-home" form="info-form" type="submit" onmouseover="changeColorImage(this, 'white')" onmouseout="changeColorImage(this, 'black')">Info<img src="info.png" class="button-img"></button>
<button class="btn btn-primary me-md-2 btn-home" type="button" data-toggle="modal" data-target="#ModalRegister" onmouseover="changeColorImage(this, 'white')" onmouseout="changeColorImage(this, 'black')">SignIn<img src="account.png" class="button-img"></button>
<button class="btn btn-primary me-md-2 btn-home" type="button" data-toggle="modal" data-target="#ModalLogIn" onmouseover="changeColorImage(this, 'white')" onmouseout="changeColorImage(this, 'black')">LogIn<img src="lock.png" class="button-img"></button>
</div>
</div>
</div>
</nav>
</div>
</div>
</body>
</html>
删除 #home-button-container 上的 d-grid class。 flex 和 grid 通常可以在布局中很好地协同工作。但在这种情况下，它会适得其反flex。
body {
background-color: black;
font-family: "Futura-CondensedExtraBold", sans-serif;
font-weight: bold;
background-image: url("wallpaper.png");
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.navbar {
background-color: #000b29;
width: 100%;
}
.input-field-warn {
color: orangered;
font-size: small;
}
.input-field-ok {
color: forestgreen;
font-size: small;
}
.btn-home {
border-radius: 10%;
background-color: darkgrey;
border-color: white;
border-width: medium;
font-weight: bold;
margin-left: 2%;
color: #222222;
font-size: 1.5vw;
width: 12.5vw;
height: calc(3.2vw + 10px);
overflow: hidden;
white-space: nowrap;
}
.btn-home:hover {
background-color: #525252;
}
.row-1 {
margin-top: 2%;
margin-left: 10%;
text-decoration: underline;
text-underline-offset: 20%;
color: white;
}
.home-box {
background: rgba(0, 0, 0, 0.5);
margin-left: 10%;
padding: 3%;
border-radius: 5%;
font-size: calc(0.7vw + 0.55vh);
color: #ffffff;
border: solid white;
}
.home-box-1 {
width: 35%;
margin-top: 2.5%;
}
.home-box-2 {
width: 55%;
margin-top: 5%;
}
.home-box-3 {
width: 40%;
margin-top: 5%;
}
.home-box-4 {
width: 80%;
margin-top: 2.5%;
}
.button-img {
margin-left: 10%;
height: 1.5vw;
width: 1.5vw;
}
#main-container {
width: 99vw;
height: 100%;
}
#login-form {
align-content: center;
padding: 5%;
}
#logo-home {
margin-left: 10%;
font-size: 2.5vw;
}
#info-img {
margin-left: 3%;
width: 5%;
height: 5%;
}
#home-navbar {
width: 100vw;
height: 10%;
}
#nav-container {
width: 100vw;
height: 10%;
}
#logo {
width: 2.5vw;
height: 2.5vw;
margin-bottom: 20%;
}
@media screen and (max-width: 992px) {
#home-button-container {
justify-content: center;
overflow: hidden;
white-space: nowrap;
width: 100%;
text-align: center;
}
.btn-home {
padding: 0;
margin: 0;
font-size: 2.5vw;
overflow: hidden;
white-space: nowrap;
display: inline-block;
}
.home-box-1 {
width: 80%;
margin-top: 2.5%;
}
.home-box-2 {
width: 80%;
margin-top: 5%;
}
.home-box-3 {
width: 80%;
margin-top: 5%;
}
#navbarSupportedContent {
overflow: hidden;
white-space: nowrap;
}
}
<!doctype html>
<html lang="en">
<head>
<title>WhoIsOnline</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="index.js" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="indexStyle.css" rel="stylesheet">
<link rel="shortcut icon" href="icon.ico" type="image/x-icon">
</head>
<body>
<div id="main-container">
<div id="nav-container">
<nav class="navbar py-3 navbar-expand-lg navbar-dark" id="home-navbar">
<div class="container-fluid">
<div id="logo-home">
<a class="navbar-brand" href="/">
<img src="LOGO%20WHOSONLINE.png" alt="Logo" id="logo">
</a>
</div>
<a class="navbar-brand" href="/">WhoIsOnline</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<div class="navbar-nav me-auto mb-2 mb-lg-0">
</div>
<div class="gap-2 ms-4 d-md-flex justify-content-md-end" id="home-button-container">
<form action="/info" id="info-form"></form>
<button class="btn btn-primary me-md-2 btn-home" form="info-form" type="submit" onmouseover="null" onmouseout="null">Info<img src="info.png" class="button-img"></button>
<button class="btn btn-primary me-md-2 btn-home" type="button" data-toggle="modal" data-target="#ModalRegister" onmouseover="null" onmouseout="null">SignIn<img src="account.png" class="button-img"></button>
<button class="btn btn-primary me-md-2 btn-home" type="button" data-toggle="modal" data-target="#ModalLogIn" onmouseover="null" onmouseout="null">LogIn<img src="lock.png" class="button-img"></button>
</div>
</div>
</div>
</nav>
</div>
</div>
</body>
</html>
您正在使用表单外的按钮 - 试试这个：
<form action="/info" id="info-form">
<button class="btn btn-primary me-md-2 btn-home" form="info-form" type="submit" onmouseover="changeColorImage(this, 'white')" onmouseout="changeColorImage(this, 'black')">Info<img src="info.png" class="button-img"></button>
<button class="btn btn-primary me-md-2 btn-home" type="button" data-toggle="modal" data-target="#ModalRegister" onmouseover="changeColorImage(this, 'white')" onmouseout="changeColorImage(this, 'black')">SignIn<img src="account.png" class="button-img"></button>
<button class="btn btn-primary me-md-2 btn-home" type="button" data-toggle="modal" data-target="#ModalLogIn" onmouseover="changeColorImage(this, 'white')" onmouseout="changeColorImage(this, 'black')">LogIn<img src="lock.png" class="button-img"></button>
</form>
body {
background-color: black;
font-family: "Futura-CondensedExtraBold", sans-serif;
font-weight: bold;
background-image: url("wallpaper.png");
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.navbar{
background-color: #000b29;
width: 100%;
}
.input-field-warn{
color: orangered;
font-size: small;
}
.input-field-ok{
color: forestgreen;
font-size: small;
}
.btn-home{
border-radius: 10%;
background-color: darkgrey;
border-color: white;
border-width: medium;
font-weight: bold;
margin-left: 2%;
color: #222222;
font-size: 1.5vw;
width: 12.5vw;
height: calc(3.2vw + 10px);
overflow: hidden;
white-space: nowrap;
}
.btn-home:hover{
background-color: #525252;
}
.row-1{
margin-top: 2%;
margin-left: 10%;
text-decoration: underline;
text-underline-offset: 20%;
color: white;
}
.home-box{
background: rgba(0, 0, 0, 0.5);
margin-left: 10%;
padding: 3%;
border-radius: 5%;
font-size: calc(0.7vw + 0.55vh);
color: #ffffff;
border: solid white;
}
.home-box-1{
width: 35%;
margin-top: 2.5%;
}
.home-box-2{
width: 55%;
margin-top: 5%;
}
.home-box-3{
width: 40%;
margin-top: 5%;
}
.home-box-4{
width: 80%;
margin-top: 2.5%;
}
.button-img{
margin-left: 10%;
height: 1.5vw;
width: 1.5vw;
}
#main-container{
width: 99vw;
height: 100%;
}
#login-form{
align-content: center;
padding: 5%;
}
#logo-home{
margin-left: 10%;
font-size: 2.5vw;
}
#info-img{
margin-left: 3%;
width: 5%;
height: 5%;
}
#home-navbar{
width: 100vw;
height: 10%;
}
#nav-container{
width: 100vw;
height: 10%;
}
#logo{
width: 2.5vw;
height: 2.5vw;
margin-bottom: 20%;
}
@media screen and (max-width: 992px) {
#home-button-container{
justify-content: center;
overflow: hidden;
white-space: nowrap;
width: 100%;
text-align: center;
}
.btn-home{
padding: 0;
margin: 0;
font-size: 2.5vw;
overflow: hidden;
white-space: nowrap;
display: inline-block;
}
.home-box-1{
width: 80%;
margin-top: 2.5%;
}
.home-box-2{
width: 80%;
margin-top: 5%;
}
.home-box-3{
width: 80%;
margin-top: 5%;
}
#navbarSupportedContent{
overflow: hidden;
white-space: nowrap;
}
}
<!doctype html>
<html lang="en">
<head>
<title>WhoIsOnline</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="index.js" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link href="indexStyle.css" rel="stylesheet">
<link rel="shortcut icon" href="icon.ico" type="image/x-icon">
</head>
<body onload="loadInfo()">
<div id="main-container">
<div id="nav-container">
<nav class="navbar py-3 navbar-expand-lg navbar-dark" id="home-navbar">
<div class="container-fluid">
<div id="logo-home">
<a class="navbar-brand" href="/">
<img src="LOGO%20WHOSONLINE.png" alt="Logo" id="logo">
</a>
</div>
<a class="navbar-brand" href="/">WhoIsOnline</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<div class="navbar-nav me-auto mb-2 mb-lg-0">
</div>
<div class="d-grid gap-2 d-md-flex justify-content-md-end" id="home-button-container">
<form action="/info" id="info-form">
<button class="btn btn-primary me-md-2 btn-home" form="info-form" type="submit" onmouseover="changeColorImage(this, 'white')" onmouseout="changeColorImage(this, 'black')">Info<img src="info.png" class="button-img"></button>
<button class="btn btn-primary me-md-2 btn-home" type="button" data-toggle="modal" data-target="#ModalRegister" onmouseover="changeColorImage(this, 'white')" onmouseout="changeColorImage(this, 'black')">SignIn<img src="account.png" class="button-img"></button>
<button class="btn btn-primary me-md-2 btn-home" type="button" data-toggle="modal" data-target="#ModalLogIn" onmouseover="changeColorImage(this, 'white')" onmouseout="changeColorImage(this, 'black')">LogIn<img src="lock.png" class="button-img"></button>
</form>
</div>
</div>
</div>
</nav>
</div>
</div>
</body>
</html>