2016-06-18 192 views
0

我使用anglular和bootstrap创建我的着陆。在上述隐私指令ui.bootstrap.tabs。一切都很好,但有chrome的一个小错误,并带有显示导航标签内嵌。 DOM的导航栏看起来未来

铬中导航栏的问题(UI-Bootstrap)

<div class="landing-navbar hidden-sm hidden-xs"> 
    <div class="container"> 
     <div ng-controller="LandingNavbarCtrl"> 
      <div class="navbar-home-ico col-md-1 col-sm-2 col-xs-5"> 
       <i class="fa fa-home inline cursor" aria-hidden="true"></i> 
       <i class="fa fa-bars inline hidden-md hidden-lg" aria-hidden="true"></i> 
      </div> 
      <div class="col-md-10 hidden-sm hidden-xs"> 
       <div class="col-md-9 middle-tabs"> 
        <uib-tabset active="activeJustified" justified="true"> 
        <uib-tab index="0" heading="Home" template-url="views/templates/tabTemplate.html"></uib-tab> 
        <uib-tab index="1" heading="Solution" template-url="views/templates/tabTemplate.html"></uib-tab> 
        <uib-tab index="2" heading="Projects" template-url="views/templates/tabTemplate.html"></uib-tab> 
        <uib-tab index="3" heading="Blog" template-url="views/templates/tabTemplate.html"></uib-tab> 
        <uib-tab index="4" heading="Services" template-url="views/templates/tabTemplate.html"></uib-tab> 
        <uib-tab index="5" heading="Shop" template-url="views/templates/tabTemplate.html"></uib-tab> 
        <uib-tab index="6" heading="About" template-url="views/templates/tabTemplate.html"></uib-tab> 
        <uib-tab index="7" heading="Contact" template-url="views/templates/tabTemplate.html"></uib-tab> 
        </uib-tabset> 
       </div> 
       <div class="col-md-2 col-md-offset-1 col-xs-12 right-tabs"> 
        <div class="pull-right"> 
         <uib-tabset active="activeJustified" justified="true"> 
          <uib-tab index="8" heading="fa fa-twitter" template-url="views/templates/socialTabsTemplate.html"></uib-tab> 
          <uib-tab index="9" heading="fa fa-facebook" template-url="views/templates/socialTabsTemplate.html"></uib-tab> 
          <uib-tab index="10" heading="fa fa-gitlab" template-url="views/templates/socialTabsTemplate.html"></uib-tab> 
          <uib-tab index="11" heading="fa fa-vk" template-url="views/templates/socialTabsTemplate.html"></uib-tab> 
         </uib-tabset> 
        </div> 
       </div> 
      </div> 
      <div class="navbar-search-ico col-md-1 col-xs-6 col-xs-offset-1 col-sm-offset-4 col-md-offset-0"> 
       <i class="fa fa-search pointer" aria-hidden="true" ng-click="setVisibility()"></i> 
       <span class="search-input"><input placeholder="Enter your search term..." ng-class="class" /></span> 
      </div> 
     </div> 
    </div> 
</div> 

当我调整浏览器SM-屏幕大小,然后将其设置回正常大小(LG) 它开始看的权利。

当在Chrome中打开 When open in chrome

当打开其他浏览器(Firefox,IE)或镀铬调整大小后:

when open in other browsers (firefox, IE) or after resizing in chrome

请帮助。谢谢。

回答

0

如果我们看看this fiddle,我们看到一切都在这种情况下,所以你应该提供你的CSS。但我很有信心,麻烦是:

.navbar .nav > li { 
    float:none; 
    display:inline-block; 
    *display:inline; /* Internet Explorer 7 compatibility */ 
} 
+1

感谢您的答复。宽度:自动;显示:内联;显示:inline-block;向左飘浮;解决我的问题 –