html - 如何使侧面的菜单正确显示
问题描述
我试图使我的中间文本居中，同时我的网站也有一个侧面菜单。不幸的是，每当我尝试将文本移动到合适的位置时，侧边菜单的边框就会缩小。我还在我的代码的某些部分使用引导程序（4.5 版本，因为我需要的某些功能在 5.0 版本中不可用）这是代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Divide et Impera</title>
<link href="../css/normalize.css" rel="stylesheet" />
<link href="../css/font-awesome.min.css" rel="stylesheet" />
<link href="../css/fonts.min.css" rel="stylesheet" />
<link href="../css/main.css" rel="stylesheet" />
<link href="../css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-light bg-transparent">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon" style="color: #fff !important"></span>
</button>
<div class="collapse navbar-collapse justify-content-center" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link nav-color nav-active" href="#">Home</a>
<a class="nav-link nav-color" href="#">Introducere DEI</a>
<a class="nav-link nav-color" href="#">DEI Iterativ</a>
<a class="nav-link nav-color" href="#">Probleme DEI</a>
</div>
</div>
</nav>
<div class="row " style="position: absolute; top: 50%; transform:translateY(-50%);">
<div class="col-sm-2 ">
<ul class="list-group" >
<li class="list-group-flush list-item-custom">Enunt</li>
<li class="list-group-flush list-item-custom">Rezolvare + cod</li>
<li class="list-group-flush list-item-custom">Explicatie rezolvare</li>
<li class="list-group-flush list-item-custom">Complexitate</li>
<li class="list-group-flush list-item-custom">Demonstratie inductiva</li>
<li class="list-group-flush list-item-custom">Executie</li>
</ul>
</div>
</div>
<div class="container ">
<div class="col">
<div class="row-sm col-custom" >
Sa se demonstreze daca un arbore binar este de tipul BST
</div>
<div class="row-sm col-custom">
Observatie: un BST are urmatoarele proprietati:
</div>
<div class="row-sm col-custom">
• Orice subarbore din partea stanga al unui nod contine valori mai mici decat nodul “tata”
</div>
<div class="row-sm col-custom">
• Orice subarbore din partea dreapta al unui nod contine valori mai mari decat nodul “tata”
</div>
<div class="row-sm col-custom">
• Atat subarborele drept, cat si cel stang trebuie sa fie la randul lor BST
</div>
</div>
</div>
</div>
</div>
</body>
</html>
我怎样才能解决收缩？
编辑：我忘了添加css，我的错：P
html {
font-family: 'Proxima Nova';
font-weight: 200;
font-size: 10px;
max-height: 100%;
background-color: #00000f;
}
body {
width: 100%;
color: #fff;
text-rendering: optimizeLegibility;
font-family: "Proxima Nova" !important;
font-size: 10px;
overflow-x: hidden;
background-color: #00000f !important;
}
.navbar-custom {
position: relative;
}
.abs-center-x {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.bg-transparent {
background-color: transparent !important;
}
.nav-color {
color :#fff !important;
font-size: 15px;
font-weight: bold;
margin: 5px;
}
.nav-color:hover {
color: #77dff1 !important;
}
.nav-active {
color: #77dff1 !important;
}
.display-custom {
text-transform: uppercase;
color: #77dff1;
font-size: 17.5rem !important;
text-align: center;
}
.lead-custom {
font-size: 2.4rem;
text-align: center;
margin: 0 auto;
max-width: 710px;
line-height: 35px;
color: #eeede7 !important;
}
/*Continut centru*/
#central {
font-family: 'Proxima Nova', sans-serif;
user-select: none;
display: table;
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#intro-wrap {
display: table-cell;
vertical-align: middle;
max-width: 710px;
width: 100%;
}
#intro {
text-transform: uppercase;
color: #77dff1 !important;
font-size: 17.5rem;
text-align: center;
}
.intro {
font-size: 2.4rem;
text-align: center;
margin: 0 auto;
max-width: 710px;
line-height: 35px;
color: #eeede7 !important;
}
#hr {
position: absolute;
top: 90%;
width: 100%;
margin: 0 auto;
}
hr {
border-color: #77dff1 !important;
max-width: 90%;
}
.button-wrap {
postion: absolute;
text-align: center;
margin-top: 2.5rem;
}
.button-custom {
font-family: 'Proxima Nova';
font-weight: 600;
background-color: transparent;
text-align: center;
text-decoration: none;
font-size: 2.5rem;
color: #fff;
cursor: pointer;
border: 2px solid #77dff1;
padding: 15px;
margin: 0 auto;
}
.button-custom:hover {
font-weight: 100;
color: #00000f;
background: #77dff1;
}
/* probleme DEI */
.list-item-custom {
text-align: center;
border: 1px solid #77dff1;
color: #77dff1;
padding: 2rem 4rem;
margin-bottom: 0.7rem;
font-weight: bold;
font-size: 1.25rem;
cursor: pointer;
}
.list-item-custom:hover {
background-color: #77dff1;
color: #fff;
}
.col-sm-6 {
text-align: center;
border: 1px solid #77dff1;
color: #77dff1;
padding: 2rem 4rem;
font-weight: bold;
font-size: 1.25rem;
cursor: pointer;
}
.col-hover:hover {
font-weight: 100;
color: #fff;
background: #77dff1;
}
.col-custom{
color: #fff;
text-align: center;
font-size: 1.75rem;
font-weight: bold;
}
解决方案
当您定位侧边菜单时，左侧仅占用 237px 宽度。之后，当您声明div class="col-sm-2"时，由于网格布局，它占用了(237px/12*2 = 39.5px)空间。从那个 39.5px 中，你得到了40px + 40px = 80px的left 和 right padding。很明显你没有空间li。结果它的边界缩小了。
下面的代码 -
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Divide et Impera</title>
<link href="../css/normalize.css" rel="stylesheet" />
<link href="../css/font-awesome.min.css" rel="stylesheet" />
<link href="../css/fonts.min.css" rel="stylesheet" />
<link href="../css/main.css" rel="stylesheet" />
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<style>
html {
font-family: 'Proxima Nova';
font-weight: 200;
font-size: 10px;
max-height: 100%;
background-color: #00000f;
}
body {
width: 100%;
color: #fff;
text-rendering: optimizeLegibility;
font-family: "Proxima Nova" !important;
font-size: 10px;
overflow-x: hidden;
background-color: #00000f !important;
}
.navbar-custom {
position: relative;
}
.abs-center-x {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.bg-transparent {
background-color: transparent !important;
}
.nav-color {
color :#fff !important;
font-size: 15px;
font-weight: bold;
margin: 5px;
}
.nav-color:hover {
color: #77dff1 !important;
}
.nav-active {
color: #77dff1 !important;
}
.display-custom {
text-transform: uppercase;
color: #77dff1;
font-size: 17.5rem !important;
text-align: center;
}
.lead-custom {
font-size: 2.4rem;
text-align: center;
margin: 0 auto;
max-width: 710px;
line-height: 35px;
color: #eeede7 !important;
}
/*Continut centru*/
#central {
font-family: 'Proxima Nova', sans-serif;
user-select: none;
display: table;
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#intro-wrap {
display: table-cell;
vertical-align: middle;
max-width: 710px;
width: 100%;
}
#intro {
text-transform: uppercase;
color: #77dff1 !important;
font-size: 17.5rem;
text-align: center;
}
.intro {
font-size: 2.4rem;
text-align: center;
margin: 0 auto;
max-width: 710px;
line-height: 35px;
color: #eeede7 !important;
}
#hr {
position: absolute;
top: 90%;
width: 100%;
margin: 0 auto;
}
hr {
border-color: #77dff1 !important;
max-width: 90%;
}
.button-wrap {
postion: absolute;
text-align: center;
margin-top: 2.5rem;
}
.button-custom {
font-family: 'Proxima Nova';
font-weight: 600;
background-color: transparent;
text-align: center;
text-decoration: none;
font-size: 2.5rem;
color: #fff;
cursor: pointer;
border: 2px solid #77dff1;
padding: 15px;
margin: 0 auto;
}
.button-custom:hover {
font-weight: 100;
color: #00000f;
background: #77dff1;
}
/* probleme DEI */
.list-item-custom {
text-align: center;
border: 1px solid #77dff1;
color: #77dff1;
padding: 2rem 4rem;
margin-bottom: 0.7rem;
font-weight: bold;
font-size: 1.25rem;
cursor: pointer;
width: auto;
}
.list-item-custom:hover {
background-color: #77dff1;
color: #fff;
}
.col-sm-6 {
text-align: center;
border: 1px solid #77dff1;
color: #77dff1;
padding: 2rem 4rem;
font-weight: bold;
font-size: 1.25rem;
cursor: pointer;
}
.col-hover:hover {
font-weight: 100;
color: #fff;
background: #77dff1;
}
.col-custom{
color: #fff;
text-align: center;
font-size: 1.75rem;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-light bg-transparent">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon" style="color: #fff !important"></span>
</button>
<div class="collapse navbar-collapse justify-content-center" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link nav-color nav-active" href="#">Home</a>
<a class="nav-link nav-color" href="#">Introducere DEI</a>
<a class="nav-link nav-color" href="#">DEI Iterativ</a>
<a class="nav-link nav-color" href="#">Probleme DEI</a>
</div>
</div>
</nav>
<div class="row " style="position: absolute; top: 50%; transform:translateY(-50%);">
<div class="col-sm-12">
<ul class="list-group" >
<li class="list-group-flush list-item-custom">Enunt</li>
<li class="list-group-flush list-item-custom">Rezolvare + cod</li>
<li class="list-group-flush list-item-custom">Explicatie rezolvare</li>
<li class="list-group-flush list-item-custom">Complexitate</li>
<li class="list-group-flush list-item-custom">Demonstratie inductiva</li>
<li class="list-group-flush list-item-custom">Executie</li>
</ul>
</div>
</div>
<div class="container ">
<div class="col">
<div class="row-sm col-custom" >
Sa se demonstreze daca un arbore binar este de tipul BST
</div>
<div class="row-sm col-custom">
Observatie: un BST are urmatoarele proprietati:
</div>
<div class="row-sm col-custom">
• Orice subarbore din partea stanga al unui nod contine valori mai mici decat nodul “tata”
</div>
<div class="row-sm col-custom">
• Orice subarbore din partea dreapta al unui nod contine valori mai mari decat nodul “tata”
</div>
<div class="row-sm col-custom">
• Atat subarborele drept, cat si cel stang trebuie sa fie la randul lor BST
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
</html>推荐阅读
- python - 在 Seaborn / Matplotlib 的小提琴图上指定高于和低于中位数的颜色
- javascript - 为什么 Node.js 中未定义函数
- r - 在官员包中保持对象放置一致
- cmd - 如何在存储过程 SQL Developer 上执行命令提示符
- sql - 正则表达式组合语句以匹配最后一个 > 和最后一个 _ 之前的所有内容
- php - 如何泛化父类中的一个通用函数？
- python - 使用 DispatcherMiddleware 捆绑多个应用程序时避免在 Flask 中使用斜杠
- hibernate - 如何通过使用 JPA 注释为复合键创建 Composite-ID 类来插入和更新 3 个表
- elasticsearch - 为弹性搜索管理配置（索引、映射、管道）的最佳实践是什么？
- javascript - 错误：超过最大更新深度