Question

我使用anglular和bootstrap创建着陆。在上述隐私指令 ui.bootstrap.tabs 中。一切都很好，但 chrome 中有一个小错误，其中显示nav-tabs内嵌。接下来是导航栏的DOM

 <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打开时

在其他浏览器（firefox，IE）中打开或在chrome中调整大小后：

请帮忙。感谢。

Answer 1

如果我们看一下this fiddle，我们就会看到一切都在这种情况下，所以你应该提供你的CSS。但我对这个问题充满了信心：

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

chrome中的导航栏错误（UI-Bootstrap）

1 个答案: