gpt4 book ai didi

html - 在不同的分辨率上 Bootstrap 小差距

转载 作者:行者123 更新时间:2023-11-28 06:34:38 24 4
gpt4 key购买 nike

你好,我开始用 bootstrap 创建网站,我制作了 topBar 和 element右边在不同的分辨率上有小差距,问题是如何摆脱它?我没有其他选择了。

Image without gap

Image with gap

/* topBar konfigūracija */
#topBar {
border-bottom-style: solid;
border-color: black;
border-width: 5px;
height: 50px;
font-family: "Karla","Helvetica Neue",Helvetica,Arial,sans-serif;
}
#topBarKaire, #topBarDesine {
display: inline-block;
height: 50px;
}
#topBarDesine {
float: right;
clear: right;
}
.informacija {
display: inline-block;
font-size: 1.3em;
padding: 5px;
height: 50px;
}
.informacija i {
font-size: 1.6em;
}
#telNumeris {
background-color: #50D050;
text-align: center;
height: 45px;
}
#konsultacija {
font-weight: bold;
}
@media (max-width: 1000px) {
#topBar {
display: none;
}
}
@media (min-width: 992px) {
#topBar {
display: block;
}
}
@media (min-width: 1200px) {
#topBar {
display: block;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head;
any other head content must come *after* these tags -->
<title>Naujas turtas - Nekilnojamo turto agentūra</title>

<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/site.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Karla:400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div id="topBar">
<div id="topBarKaire">
<div class="informacija"><i class="fa fa-envelope"></i> info@naujasturtas.lt</div>
<div class="informacija"><i class="fa fa-facebook-official"></i> /NekilnojamasTurtasKursenai</div>
</div>
<div id="topBarDesine">
<div id="konsultacija"class="informacija">Nemokamos konsultacijos</div>
<div id="telNumeris"class="informacija"><i class="fa fa-mobile"></i> +37069810331</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

最佳答案

问题是您正在使用 .container,请尝试使用 .container-fluid 来使导航栏具有响应性和全宽。

.container 类在不同的分辨率下有大小限制。

关于html - 在不同的分辨率上 Bootstrap 小差距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34771962/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com