个人中心
gpt4 book ai didi

html - Bootstrap 4 Navbar-品牌垂直对齐

转载 作者：行者123 更新时间：2023-11-28 02:38:40 26 4
gpt4 key购买 nike

我还没有尝试过任何代码，但想问一下是否有可能有一个带有中心导航栏品牌的导航栏，它位于顶部和底部与导航栏对齐，这样如果品牌增长，导航栏就不会增长？

我想将图像的底部与导航栏的底部对齐:

#hdrContainer {
  background-color: #0a3782;
}

.container {
  background-color: inherit;
}

#tblHeader {
  width: 100%;
  /*font-size: .8125rem;*/
  font-size: 1rem;
  text-align: right;
  color: #ffffff;
  font-weight: bold;
}

#tblHeader tr {
  height: 50px;
}

.breadcrumb {
  background-color: inherit;
  margin-bottom: initial;
  font-weight: bold;
}

.breadcrumb .active {
  color: inherit;
}

#socialbrand {
  text-align: right;
}

#mainNavbar {
  background-color: gray;
}

#mainNavbar .container .navbar {
  position: relative;
  z-index: 0;
  max-height: 40px;
}

.navbar-brand {
  position: relative;
  z-index: 1;
  margin-right: initial;
}

.form-control {
  width: 200px;
}

.btn-outline-navy {
  color: #f6b40e;
  background-color: transparent;
  background-image: none;
  border-color: #f6b40e;
}

body {}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<body>
  <div id="hdrContainer" class="container-fluid">
    <div class="container">
      <table id="tblHeader">
        <tbody>
          <tr>
            <td>
              <nav aria-label="breadcrumb" role="navigation">
                <ol class="breadcrumb">
                  <li class="breadcrumb-item active" aria-current="page">Commander, Naval Surface Force, US Pacific</li>
                </ol>
              </nav>
            </td>
            <td id="socialbrand" style="display: block; padding: .75rem 1rem;">Follow Us |
              <i class="fa fa-facebook-square" aria-hidden="true"></i>
              <i class="fa fa-twitter-square" aria-hidden="true"></i>
              <i class="fa fa-flickr" aria-hidden="true"></i>
              <i class="fa fa-wordpress" aria-hidden="true"></i>
              <i class="fa fa-youtube-square" aria-hidden="true"></i>
            </td>
          </tr>
          <tr>
            <td colspan="2">
              <nav class="navbar navbar-light">
                <form class="form-inline">
                  <input class="form-control form-control-sm ml-auto mr-sm-2 float-right" type="search" placeholder="Search" aria-label="Search">
                  <button class="btn btn-sm btn-outline-navy my-2 my-sm-0" type="submit">Search</button>
                </form>
              </nav>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div id="mainNavbar" class="container-fluid">
    <div class="container">
      <nav class="navbar navbar-expand-lg navbar-light">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav ml-auto 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 dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown
                                </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled" href="#">Disabled</a>
            </li>
          </ul>
          <!-- Just an image -->
          <a class="navbar-brand mr-auto ml-auto" href="#">
            <img src="https://getbootstrap.com/assets/brand/bootstrap-solid.svg" width="75" height="75" alt="">
          </a>
          <ul class="navbar-nav ml-auto 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 dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown
                                </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown1">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled" href="#">Disabled</a>
            </li>
          </ul>
        </div>
      </nav>
    </div>
  </div>
</body>

最佳答案

有关位置的 W3 文档:https://www.w3schools.com/css/css_positioning.asp

我的猜测是，您可能想要使用位置固定的 div，并将导航栏和品牌都放在里面，如果您希望将其设置为缩小动画，则在 scroll-y 上更改品牌。

关于html - Bootstrap 4 Navbar-品牌垂直对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47291962/

26 4 0
文章推荐： html - 将盒子的大小与移动 css bootstrap 匹配的问题
文章推荐： javascript - 使用closure-compiler自动编译javascript源代码
文章推荐： javascript - 不同模板Angular4中的多个路由器导出
文章推荐： c++ - 安装 odeint 时出错
行者123
个人简介

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

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