Question

我正在尝试将导航栏右侧的品牌/徽标对齐，但当我设法执行此操作时，当我进入移动视图时，徽标会保留在折叠菜单中。

这是桌面视图中的正确位置：

当我进入移动视图时会发生这种情况。当菜单打开时，我希望徽标保持在顶部：

这是我的代码：

<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-sika">
  <div class="container">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
    <div class="collapse navbar-collapse" id="navbarsExampleDefault">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Início <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Zonas da Casa</a>
          <div class="dropdown-menu" aria-labelledby="dropdown01">
            <a class="dropdown-item" href="#">Garagens e Estacionamentos</a>
            <a class="dropdown-item" href="#">Cozinhas e WC's</a>
            <a class="dropdown-item" href="#">Quartos e Salas</a>
            <a class="dropdown-item" href="#">Varandas e Terraços</a>
            <a class="dropdown-item" href="#">Piscinas e Reservatórios de Água</a>
            <a class="dropdown-item" href="#">Fachadas</a>
            <a class="dropdown-item" href="#">Coberturas Inclinadas</a>
            <a class="dropdown-item" href="#">Coberturas Planas</a>
            <a class="dropdown-item" href="#">Caves e Paredes Enterradas</a>
            <a class="dropdown-item" href="#">Isolamento Térmico pelo Exterior</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">100 Soluções</a>
        </li>
        <li class="nav-item">
          <a class="nav-link page-scroll" href="#pos">Pontos de Venda</a>
        </li>
        <li class="nav-item">
          <a class="nav-link page-scroll" href="#registo">Registo</a>
        </li>
        <li class="nav-item">
          <a class="nav-link page-scroll" href="#contacto">Contacto</a>
        </li>
      </ul>
    </div>
    <a class="navbar-brand" href="#">
      <img src="img/logo_sika_pt_02.png" width="225" height="45" class="d-inline-block align-top" alt="">
    </a>
  </div>
</nav>

此代码是从模板中复制的，我正在尝试编辑它。

Answer 1

您必须在代码中将.navbar-brand类移到按钮上方并将其设置为float：right。记得在你的.container课程中清除你的浮动。

Answer 2

您应该考虑使用bootstraps pull-right选项以保持图像在右侧

Answer 3

您是否在代码中包含了任何@media声明？例如，您需要为完整网站指定最小宽度，并为响应/移动视图指定最大宽度。

这里有一些示例HTML和CSS：

<header>
    <div class="container">
        <div class="topnav">
            <div class="brand">
                        <a href="https://oursite.com" data-sync-host="www" title="Our Site Home">
                            <div class="header-logo" alt="Our Site Logo"></div>
                            <div class="header-logo-icon" alt="Our Site Logo Icon"></div>
                        </a>
            </div>
        </div>
    </div>
 </header>

<div data-nav-mobile-backing="" class="exclusive-window-wrapper nav-mobile-backing hidden" style="">
            <div class="nav-mobile container">
                <div data-nav-mobile="">

                    <div class="linkset-section" data-nav-mobile-section="platform">
                        <h2 data-nav-mobile-link-opener="" class="opener" aria-expanded="false">Products</h2>


<div class="mobile">
                            <button class="reset mobile-open" data-nav-mobile-toggle="" aria-expanded="false"><i class="fa fa-fw fa-bars"></i></button>
                            <button class="reset mobile-close hidden" data-nav-mobile-toggle="" aria-expanded="true"><i class="fa fa-fw fa-times"></i></button>
                        </div>

@media (max-width: 992px)
header .topnav {
    position: relative;
    text-align: center;

header .topnav>div {
    display: inline-block;
    float: right;
}
@media (max-width: 736px)
header .brand {
    width: 30px;
    padding-top: 2.5px;
}

header .brand {
    left: 0;
    width: 155px;
    margin-top: 15px;
}

.exclusive-window-wrapper.hidden {
    display: block !important;
    visibility: visible !important;
    left: 423px;
    right: -423px;
}

.nav-mobile-backing {
    background-color: #2D2D2D;
}

.exclusive-window-wrapper {
    z-index: 10;
    overflow: hidden;
    position: fixed;
    top: 60px;
    right: 0;
    bottom: 0;
    left: calc(100% - 320px);
    transition-property: left,right;
    transition-duration: .5s;
}

.hidden {
    display: none!important;
}


.nav-mobile {
    max-width: 320px;
    padding: 0;
    font-family: Lato,Helvetica Neue,Helvetica,Arial,sans-serif;
    color: #FFF;
}

.container {
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
}

将徽标/品牌对齐到右侧

3 个答案: