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>

您在 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 以使搜索按钮处于同一级别。

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

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

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

1 个答案: