Question

我需要做一个响应式导航栏： LOGO1（左侧）文本（居中）LOGO2（右侧）

我正在尝试下一个但是当它调整到小屏幕时它不起作用。

这是我的问题：在＆＃34; lg＆＃34;大小屏幕是正确的。但是在＆＃34; md＆＃34;大小或更小LOGO2到左侧。而且，在＆＃39; xs＆＃39;确定＆＃39;文字＆＃39;继续显示下面的LOGO2。

在我的标记代码中，我有一些有角度的工作人员，但回答这个问题并不重要。

我做错了什么？

//标记

div class="container-fluid example2">
  <nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" ng-click="isMyNavCollapsed = !isMyNavCollapsed" ng-init="isMyNavCollapsed=false">
          <span class="sr-only">Navegação</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand"><img src="img/SoundCloud64.png" alt="Cloud Clínica">
        </a>
      </div>

      <p class='navbar-text navbar-center font35'><strong>Retire seu ticket aqui</strong></p>

      <div class="collapse navbar-collapse" id="navbar_right" uib-collapse="isMyNavCollapsed">
        <ul class="nav navbar-nav navbar-right">
            <li><img class="img-responsive" height="150" width="200" src="img/red-ticket-md.png" /></li>
        </ul>
       </div>
      <!--/.nav-collapse -->
    </div>
    <!--/.container-fluid -->
  </nav>
</div>

// CSS

<style type="text/css">
.example2 .navbar-brand>img {
  padding: 7px 15px;
}
.navbar-right img{
   padding: 7px 15px;   
}
.navbar-center
{
    display:inline-block;
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    text-align: center;
    overflow: visible;
    height: 0;
    padding:15px 10px 10px 10px;
    z-index: 10099;
}
.navbar-nav,
.navbar-right {
  display:inline-block;
  position: relative;
  z-index: 100100;
 }

</style>

使用两个徽标和居中文本制作响应式导航栏布局

0 个答案: