javascript - 在引导轮播上获取中心导航栏的问题
问题描述
我目前正在尝试使用引导程序构建一个网站，这是一个非常基本的网站，我正在尝试设置主页，其中包含图像轮播并且在设置导航栏时遇到问题。我似乎无法获得包含徽标的浮动居中导航栏。我想将徽标用作主页的href，然后有一个标记为照片的按钮，该按钮将有一个照片下拉菜单和一个联系页面，该页面将在主页上有一个锚部分。我以前使用过 bootstrap，但还没有达到 100% 的舒适度。我已经设法利用各种堆栈溢出论坛来解决我的其他问题，但在弄清楚如何做到这一点时遇到了问题。
以下是我的导航栏代码的要点。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.8.5">
<title>blah</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link rel="canonical" href="https://getbootstrap.com/docs/4.3/examples/carousel/">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- Bootstrap core CSS -->
<link href="/docs/4.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
.headerrow {
text-align: center;
padding-top: 5%;
padding-bottom: 5%;
}
img.caro {
width: 140;
height: 140;
}
</style>
<!-- Custom styles for this template -->
<link href="carousel.css" rel="stylesheet">
</head>
<body>
<header>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a href="#" class="navbar-left"><img src="logo2.png" style="width:8%; height:8%;"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
</header>
<main role="main">
<div class="container">
<h2>Carousel Example</h2>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox" style="border-radius: 15px; width:100%; height: 600px !important;">
<div class="item active">
<img src="cover.jpg" alt="Cover1" style="width:100%;">
</div>
<div class="item">
<img src="cover2.jpg" alt="Cover2" style="width:100%;">
</div>
<div class="item">
<img src="LogChimneyOut.jpg" alt="Cover3" style="width:100%;">
</div>
<div class="item">
<img src="Fireplace3.jpg" alt="Cover3" style="width:100%;">
</div>
<div class="item">
<img src="Deck1.jpg" alt="Cover3" style="width:100%;">
</div>
<div class="item">
<img src="Wall2.jpg" alt="Cover3" style="width:100%;">
</div>
<div class="item">
<img src="Fireplace2.jpg" alt="Cover3" style="width:100%;">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
这包括导航栏以及它正下方的轮播图像幻灯片。我试图在带有徽标、图片按钮和联系页面的轮播顶部获得一个浮动中心导航栏。我在别处寻找导航栏，但似乎总是打破轮播部分。我肯定不是最擅长 HTML 或引导程序的人，但我在这里尝试。谢谢。
解决方案
在navbar-nav菜单中，创建一个新的列表项并移动其中a包含徽标图像的标签，最后将mr-autoclass替换为mx-auto, align-items-centerclasses 以使所有项目居中。
<ul class="navbar-nav mx-auto align-items-center">
<li class="nav-item"><a href="nav-link"><img src=".." alt="..">logo</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
</ul>
请在此处查看弹性盒对齐在 BS4 中的工作原理
对于下拉菜单按钮，请遵循以下结构：
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown_id" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Photos</a>
<div class="dropdown-menu" aria-labelledby="dropdown_id">
<a class="dropdown-item" href="#">Photos</a>
</div>
</li>
请注意，在您的代码段中，您链接了不必要的不同版本的 Bootstrap 文件。按照此介绍 了解如何在您的网站中正确包含 Bootstrap。
例子：
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<header>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mx-auto align-items-md-center">
<li class="nav-item">
<a class="navbar-brand" href="#"><img src="https://via.placeholder.com/50&text=logo" alt="logo" width="50px" height="50px"></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Photos</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Photo</a>
</div>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
</header>
<main role="main">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="//source.unsplash.com/random/1100x400" alt="Los Angeles" width="1100" height="400" class="w-100 h-100">
</div>
<div class="carousel-item">
<img src="//source.unsplash.com/random/1100x400" alt="Chicago" width="1100" height="400" class="w-100 h-100">
</div>
<div class="carousel-item">
<img src="//source.unsplash.com/random/1100x400" alt="New York" width="1100" height="400" class="w-100 h-100">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</main>推荐阅读
- javascript - 这段代码有什么问题？我正在尝试在 Angular 中移动 TS 中的 JS 代码
- python - MinMax 缩放数组，具有整个数组的最大值和最小值
- schema.org - 自定义帖子档案和自定义分类档案的 Schema.org 标记？
- javascript - 将 JSONified 对象传递到 Django 中的后端？
- asp.net - 使用 linq 查找出现在两个列表中的项目
- java - 如何在 Firebase 中创建类似的功能？
- matlab - 查找二进制向量中第 n 次出现 1 的索引（matlab）
- matlab - 在 uitable 中自动填充单元格 - Matlab
- python - 获得了关键字参数“inputLocForTrain”的多个值
- python - 包含整数作为字符串的大文本文件（即使是 python 列表也无法保存），我们可以在 Python 中对它们进行排序吗