个人中心
gpt4 book ai didi

javascript - 在 bootstrap carousel 上获取中心导航栏的问题

转载 作者：行者123 更新时间：2023-11-28 19:30:50 25 4
gpt4 key购买 nike

我目前正在尝试使用 bootstrap 构建网站，这是一个非常基础的网站，我正在尝试设置主页，其中包含图像轮播，但在设置导航栏时遇到问题。我似乎无法获得包含 Logo 的 float 居中导航栏。我想使用 Logo 作为主页的 href，然后有一个标记为照片的按钮，该按钮将有一个照片下拉菜单和一个联系页面，该页面将在主页上有一个 anchor 部分。我以前使用过 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>

这包括导航栏及其正下方的轮播图像幻灯片。我正在尝试在具有 Logo 、图片按钮和联系页面的旋转木马顶部获得一个 float 的中心导航栏。我在别处寻找导航栏，但似乎总是会破坏轮播部分。我肯定不是 HTML 或 bootstrap 方面的佼佼者，但我正在尝试。谢谢。

最佳答案

在 navbar-nav 菜单中，创建一个新的列表项并移动包含您的 Logo 图像的 a 标签，最后替换 mr- auto 类与 mx-auto、align-items-center 类使所有元素居中。

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

请参阅here flexbox 对齐方式 在 BS4 中的工作原理

对于dropdown菜单按钮，遵循这个结构:

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


Please note that in your snippet you have linked unnecessarily different versions of Bootstrap files. Follow this introduction to see how to include Bootstrap properly in your website.


示例:

<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 - 在 bootstrap carousel 上获取中心导航栏的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55074039/

25 4 0
文章推荐： javascript - JavaScript 中的自定义计时器
文章推荐： python - 避免正则表达式 [python]
文章推荐： python - 我想嵌套循环十次，还有比这更好的方法吗？
文章推荐： html - 文字在移动版网页中的位置
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com