Javascript 在引导转盘上获取中心导航栏的问题_Javascript_Html_Css_Navbar

Javascript 在引导转盘上获取中心导航栏的问题

javascript html css

Javascript 在引导转盘上获取中心导航栏的问题,javascript,html,css,navbar,Javascript,Html,Css,Navbar,我目前正试图建立一个网站使用引导，这是一个非常基本的网站，我正试图建立一个主页，其中有一个图像旋转木马，我有问题设置导航栏。我似乎无法得到一个浮动中心导航栏，其中包括标志。我想使用徽标作为主页的href，然后有一个标有照片的按钮，该按钮将有一个用于照片的下拉菜单和一个联系人页面，该页面将在主页上有一个锚节。我以前使用过bootstrap，但没有达到100%舒适的程度。我已经设法利用各种堆栈溢出论坛来解决我的其他问题，但一直在思考如何做到这一点下面是我的导航条形码的要点 <!doc

我目前正试图建立一个网站使用引导，这是一个非常基本的网站，我正试图建立一个主页，其中有一个图像旋转木马，我有问题设置导航栏。我似乎无法得到一个浮动中心导航栏，其中包括标志。我想使用徽标作为主页的href，然后有一个标有照片的按钮，该按钮将有一个用于照片的下拉菜单和一个联系人页面，该页面将在主页上有一个锚节。我以前使用过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>


废话
-->
.bd占位符img{
字体大小：1.125rem；
文本锚定：中间；
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
}
@介质（最小宽度：768px）{
.bd占位符img lg{
字体大小：3.5rem；
}
}
海德罗先生{
文本对齐：居中；
垫面：5%；
垫底：5%；
}
卡罗先生{
宽度：140；
身高：140；
}








旋转木马示例

这包括导航栏以及它正下方的旋转木马图像幻灯片。我正试图在旋转木马的顶部找到一个浮动中心导航条，上面有徽标、图片按钮和联系人页面。我在其他地方寻找导航条，但导航条似乎总是打破旋转木马部分。我当然不是HTML或bootstrap方面的佼佼者，但我正在这里尝试。谢谢

在

navbar nav

菜单中，创建一个新的列表项，并移动将徽标图像固定在其中的

标签，最后将

mr auto

类替换为

mx auto

，

将项目居中对齐

类以使所有项目居中

请查看在BS4中flexbox对齐方式的工作原理

对于菜单按钮，请遵循以下结构：

请注意，在您的代码片段中，您已经进行了不必要的链接不同版本的引导文件。照此了解如何在网站中正确地包含引导

示例：

在

导航栏导航