bootstrap 导航栏和旋转木马的疯狂问题

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 种不同的 bootstrap 样式是不寻常的，但我尽力让我的轮播正常工作，但我想要在没有导航栏问题的情况下实现它。有人可以帮我吗？非常感谢您。

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 class，这意味着它有 flex-direction:column。您还有 col-6 到 nav 元素，所以它永远不会完全适合桌面顶部，我已经删除了它。

我还添加了 mr-auto 到 ul 以将其推到左侧。

我已经将 ul 之外的 navbar-brand 作为 [Bootstrap 文档] (https://getbootstrap.com/docs/4.0/components/navbar/) 也这样做了，我认为这会导致对齐问题，否则.至少我测试的时候是这样。

我也将 class nav-item 添加到 li 元素中，如 Bootstrap 文档中所述。

一切正常。

我从表格中删除了 navbar-left，因为它会位于我在您的屏幕截图中看到的右侧附近。我在其中添加了 form-inline 以获得同一级别的搜索按钮。

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

需要进一步说明轮播的问题所在 我想象调用两个不同的 bootstrap 样式表没有帮助，删除旧版本。

bootstrap 导航栏和旋转木马的疯狂问题

Crazy problem with bootstrap navbar and carousel

css

bootstrap-4

twitter-bootstrap-3

carousel

navbar