- html - 我的下拉菜单的内容关闭得太快
- c# - 使用 Html Agility Pack 从网页中的表中获取值而不使用 "SelectNode'
- html - 内容容器下的 CSS 下拉菜单
- html - 如何停止嵌套列表重叠父列表?
因此,正如您在代码片段中看到的那样,下拉菜单的背景会跳起来。但是,当我删除 .navlinks-center 类时,它工作得很好。
我是网络开发的新手,非常感谢您的帮助,因为如果不更改导航链接的位置,我无法修复它。
.navbar-custom {
background-color: rgba(255,255,255,0.95) !important;
left: 0;
position: absolute;
right: 0;
top: 0;
transition: all 0.45s ease;
z-index: 1030;
}
.navlinks-center {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body style=" background-color: gray;"
>
<nav class="navbar navbar-custom Schatten navbar-expand-xl navbar-light justify-content-center">
<a class="navbar-brand" href="#"><img src="Brand1.png" style="height: 3.6rem;"></a>
<a class="navbar-brand" href="#"><img src="Brand2.png" style="height: 3rem;"></a>
<button class="navbar-toggler ml-1" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsingNavbar">
<ul class="navbar-nav mr-auto navlinks-center">
<li class="nav-item active">
<a class="nav-link hvr-grow" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link hvr-grow" href="about.html">Über uns</a>
</li>
<li class="nav-item">
<a class="nav-link hvr-grow" href="events.html">Events</a>
</li>
<li class="nav-item">
<a class="nav-link hvr-grow" href="forum.html">Forum</a>
</li>
</div>
</nav>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
正如下面所建议的,我尝试了文本对齐,现在它在小屏幕上工作正常,但在大屏幕上,导航项向左对齐。
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code><!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body style=" background-color: gray;"
>
<nav class="navbar navbar-custom Schatten navbar-expand-xl navbar-light justify-content-center">
<a class="navbar-brand" href="#"><img src="Brand1.png" style="height: 3.6rem; width: 108px;"></a>
<a class="navbar-brand" href="#"><img src="Brand2.png" style="height: 3rem; width: 261px;"></a>
<button class="navbar-toggler ml-1" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsingNavbar">
<ul class="navbar-nav mr-auto navlinks-center">
<li class="nav-item active">
<a class="nav-link hvr-grow" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link hvr-grow" href="about.html">Über uns</a>
</li>
<li class="nav-item">
<a class="nav-link hvr-grow" href="events.html">Events</a>
</li>
<li class="nav-item">
<a class="nav-link hvr-grow" href="forum.html">Forum</a>
</li>
</div>
</nav>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html></code></pre>
</div>
</div>
它现在在小屏幕上工作正常,但在大屏幕上,导航项在品牌旁边的左侧对齐
最佳答案
“position:absolute”是必要的吗?
因为我认为您可以通过简单地使用“text-align”或“margin”属性来实现您的目标。
例如:
.navbar-custom {
background-color: rgba(255,255,255,0.95) !important;
left: 0;
position: absolute;
right: 0;
top: 0;
transition: all 0.45s ease;
z-index: 1030;
}
.navbar-collapse{
text-align: center;
}
或者
.navbar-custom {
background-color: rgba(255,255,255,0.95) !important;
left: 0;
position: absolute;
right: 0;
top: 0;
transition: all 0.45s ease;
z-index: 1030;
}
.nav-item {
margin: auto;
}
[编辑]
要使菜单居中并使图片位于左侧(如您的示例所示),您可能需要使用媒体查询。如果您的品牌图片具有恒定宽度,那么这里是一个应该可以工作的 css:
.navbar-custom {
background-color: rgba(255,255,255,0.95) !important;
left: 0;
position: absolute;
right: 0;
top: 0;
transition: all 0.45s ease;
z-index: 1030;
}
.nav-item{
margin: auto;
}
.navbar-nav{
display: flex;
margin: auto;
}
@media screen and (min-width:1200px){
.navbar-nav{
padding-right: 6.6rem;
}
}
但我仍然不确定这是最好的解决方案。
关于html - Bootstrap 4 导航栏错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54520608/
我已经使用 vue-cli 两个星期了,直到今天一切正常。我在本地建立这个项目。 https://drive.google.com/open?id=0BwGw1zyyKjW7S3RYWXRaX24tQ
您好,我正在尝试使用 python 库 pytesseract 从图像中提取文本。请找到代码: from PIL import Image from pytesseract import image_
我的错误 /usr/bin/ld: errno: TLS definition in /lib/libc.so.6 section .tbss mismatches non-TLS reference
我已经训练了一个模型,我正在尝试使用 predict函数但它返回以下错误。 Error in contrasts<-(*tmp*, value = contr.funs[1 + isOF[nn]])
根据Microsoft DataConnectors的信息我想通过 this ODBC driver 创建一个从 PowerBi 到 PostgreSQL 的连接器使用直接查询。我重用了 Micros
我已经为 SoundManagement 创建了一个包,其中有一个扩展 MediaPlayer 的类。我希望全局控制这个变量。这是我的代码: package soundmanagement; impo
我在Heroku上部署了一个应用程序。我正在使用免费服务。 我经常收到以下错误消息。 PG::Error: ERROR: out of memory 如果刷新浏览器,就可以了。但是随后,它又随机发生
我正在运行 LAMP 服务器,这个 .htaccess 给我一个 500 错误。其作用是过滤关键字并重定向到相应的域名。 Options +FollowSymLinks RewriteEngine
我有两个驱动器 A 和 B。使用 python 脚本,我在“A”驱动器中创建一些文件,并运行 powerscript,该脚本以 1 秒的间隔将驱动器 A 中的所有文件复制到驱动器 B。 我在 powe
下面的函数一直返回这个错误信息。我认为可能是 double_precision 字段类型导致了这种情况,我尝试使用 CAST,但要么不是这样,要么我没有做对...帮助? 这是错误: ERROR: i
这个问题已经有答案了: Syntax error due to using a reserved word as a table or column name in MySQL (1 个回答) 已关闭
我的数据库有这个小问题。 我创建了一个表“articoli”,其中包含商品的品牌、型号和价格。 每篇文章都由一个 id (ID_ARTICOLO)` 定义,它是一个自动递增字段。 好吧,现在当我尝试插
我是新来的。我目前正在 DeVry 在线学习中级 C++ 编程。我们正在使用 C++ Primer Plus 这本书,到目前为止我一直做得很好。我的老师最近向我们扔了一个曲线球。我目前的任务是这样的:
这个问题在这里已经有了答案: What is an undefined reference/unresolved external symbol error and how do I fix it?
我的网站中有一段代码有问题;此错误仅发生在 Internet Explorer 7 中。 我没有在这里发布我所有的 HTML/CSS 标记,而是发布了网站的一个版本 here . 如您所见,我在列中有
如果尝试在 USB 设备上构建 node.js 应用程序时在我的树莓派上使用 npm 时遇到一些问题。 package.json 看起来像这样: { "name" : "node-todo",
在 Python 中,您有 None单例,在某些情况下表现得很奇怪: >>> a = None >>> type(a) >>> isinstance(a,None) Traceback (most
这是我的 build.gradle (Module:app) 文件: apply plugin: 'com.android.application' android { compileSdkV
我是 android 的新手,我的项目刚才编译和运行正常,但在我尝试实现抽屉导航后,它给了我这个错误 FAILURE: Build failed with an exception. What wen
谁能解释一下?我想我正在做一些非常愚蠢的事情,并且急切地等待着启蒙。 我得到这个输出: phpversion() == 7.2.25-1+0~20191128.32+debian8~1.gbp108
我是一名优秀的程序员,十分优秀!