如何解决引导程序导航栏和轮播的疯狂问题
我在我的网页上使用了 3 种不同的 css 样式,它们的顺序如下 -
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="{% static "css/styles.css" %}">
第三种风格(它包含一些轮播的细微美学变化)可能与这个问题无关。 (我已经测试过了)
问题是 - 我希望导航栏和旋转木马(都还没有完成)正确显示,但是当我的 3 种样式都在运行时,旋转木马很好,但是导航栏改变了它的形状到奇怪的比例。 当我禁用第一种样式时,导航栏很好,但轮播被弄乱了,它的图像显示在另一个之上,并且缺少用于更改幻灯片的按钮。
这是导航栏代码 -
<nav class='navbar navbar-default navbar-static-top col-6'>
<div class="container">
<ul class="nav navbar-nav">
<li><a class="navbar-brand" href="{% url 'index' %}">Janko</a></li>
<li><a class="navbar-link" href="{% url 'hobbieswithCSS' %}">My hobbies</a></li>
<li><a class="navbar-link" href="{% url 'contactmewithCSS' %}">Contact me</a></li>
<li><a class="navbar-link" href="{% url 'basic_app:register' %}">Register</a></li>
{% if user.is_authenticated %}
<li><a class='navbar-link' href="{% url 'logout' %}">Logout</a></li>
{% else %}
<li><a class="navbar-link" href="{% url 'basic_app:user_login' %}">Login</a></li>
{% endif %}
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</nav>
这是轮播代码 -
<div class="carousel slide" data-ride="carousel" id="carouselExampleIndicators">
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#carouselExampleIndicators"></li>
<li data-slide-to="1" data-target="#carouselExampleIndicators"></li>
<li data-slide-to="2" data-target="#carouselExampleIndicators"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img alt="First slide" class="d-block w-100" src="https://i.postimg.cc/Jn0X0pDS/1.jpg">
<div class="carousel-caption d-none d-md-block">
<h5 class="animated bounceInRight" style="animation-delay: 1s">Web Development</h5>
<p class="animated bounceInLeft" style="animation-delay: 2s">Lorem ipsum dolor sit amet,consectetur adipisicing elit. Maxime,nulla,tempore. Deserunt excepturi quas vero.</p>
<p class="animated bounceInRight" style="animation-delay: 3s"><a href="#">More Info</a></p>
</div>
</div>
<div class="carousel-item">
<img alt="Second slide" class="d-block w-100" src="https://i.postimg.cc/SQXZtrTZ/2.jpg">
<div class="carousel-caption d-none d-md-block">
<h5 class="animated slideInDown" style="animation-delay: 1s">web design</h5>
<p class="animated fadeInUp" style="animation-delay: 2s">Lorem ipsum dolor sit amet,tempore. Deserunt excepturi quas vero.</p>
<p class="animated zoomIn" style="animation-delay: 3s"><a href="#">More Info</a></p>
</div>
</div>
<div class="carousel-item">
<img alt="Third slide" class="d-block w-100" src="https://i.postimg.cc/Jh4x3cH5/3.jpg">
<div class="carousel-caption d-none d-md-block">
<h5 class="animated zoomIn" style="animation-delay: 1s">Digital Marketing</h5>
<p class="animated fadeInLeft" style="animation-delay: 2s">Lorem ipsum dolor sit amet,tempore. Deserunt excepturi quas vero.</p>
<p class="animated zoomIn" style="animation-delay: 3s"><a href="#">More Info</a></p>
</div>
</div>
</div><a class="carousel-control-prev" data-slide="prev" href="#carouselExampleIndicators" role="button"><span aria-hidden="true" class="carousel-control-prev-icon"></span> <span class="sr-only">Previous</span></a> <a
class="carousel-control-next" data-slide="next" href="#carouselExampleIndicators" role="button"><span aria-hidden="true" class="carousel-control-next-icon"></span> <span class="sr-only">Next</span></a>
</div>
我知道,这有点令人难以置信,同时使用 2 种不同的引导程序样式是不寻常的,但我已尽力使我的轮播正常工作,但我希望在没有问题的情况下实现它与导航栏。有人可以帮我吗?预先非常感谢您。
解决方法
<nav class='navbar navbar-default navbar-static-top'>
<div class="container">
<a class="navbar-brand" href="#">Janko</a>
<ul class="nav mr-auto">
<li class="nav-item"><a class="navbar-link" href="#">My hobbies</a></li>
<li class="nav-item"><a class="navbar-link" href="#">Contact me</a></li>
<li class="nav-item"><a class="navbar-link" href="#}">Register</a></li>
<li class="nav-item"><a class='navbar-link' href="#">Logout</a></li>
<li class="nav-item"><a class="navbar-link" href="#">Login</a></li>
</ul>
<form class="navbar-form form-inline" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</nav>
您在 navbar-nav
上有 ul
类,这意味着它有 flex-direction:column
。您还为 col-6
元素添加了 nav
,因此它永远不会完全适合桌面上的顶部,我已将其删除。
此外,我已将 mr-auto
添加到 ul
以将其推到左侧。
我将 navbar-brand
放在 ul
之外,因为 [Bootstrap 文档] (https://getbootstrap.com/docs/4.0/components/navbar/) 也这样做,否则我认为它会导致对齐问题。至少在我测试时是这样。
我也将类 nav-item
添加到 li
元素中,就像在 Bootstrap 文档中一样。
一切都按预期进行。
我从表单中删除了 navbar-left
,因为它位于我在您的屏幕截图中看到的右侧附近。我向其中添加了 form-inline
以使搜索按钮处于同一级别。
可能只需要最后整理一下,但这已经解决了问题。
需要进一步说明轮播的问题是什么 我想调用两个不同的引导样式表并没有帮助,删除旧版本。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。