引导导航栏和轮播的疯狂问题

Question

我在我的网页上使用了 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, consectetur adipisicing elit. Maxime, nulla, 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, consectetur adipisicing elit. Maxime, nulla, 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 种不同的引导样式是不寻常的，但我正在尽我最大的努力使我的轮播正常工作，但我想在没有问题的情况下实现它与导航栏。有人可以帮我吗？非常感谢您。

Answer 1

<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>

ul 上有 navbar-nav 类，这意味着它有 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，以使搜索按钮位于同一级别。

可能只需要一些最后的整理，但这已经解决了问题。

需要进一步说明轮播的问题是什么 我想调用两个不同的引导样式表并没有帮助，请删除旧版本。