Question

大屏幕（好）

中画面（坏）

小屏幕（好）

小屏幕按钮下拉（坏）

我尝试制作一个plunkr并且我仍然会链接它，但它有很多错误，但它有我的css和html，所以你仍然可以看到它。我正在尝试制作一个移动响应式导航栏，出于某种原因，当我到达中等大小的屏幕时，按钮会长达1000+ px并占用大量空间。尝试在chrome dev工具中查看计算选项卡，但它不会告诉我什么导致了巨大的宽度。此外，在小屏幕上下拉时宽度也很大。

HTML：

<section class="navbarheader">
            <div class="navbar navbar-default navbar-fixed-top" style="z-index: 10">
                <div class="container-fluid">
                    <!--Navbar Brand-->
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#desktop-nav">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a href="/" class="navbar-brand">
                            <span class="navbarLogo">
                                <img src="/images/propulstion%20navigation-bar-logo.png" />
                            </span>
                        </a>
                    </div>
                    <!--End of Navbar Brand-->
                    <!--Desktop Navbar-->
                    <div id="desktop-nav" class="collapse navbar-collapse">
                        <ul class="nav navbar-nav navbar-right">
                            <!--Settings Dropdown-->
                            <li id="settings" class="dropdown" uib-dropdown>
                                <a href="javascript:void(0);" class="nav-icon dropdown-toggle" uib-dropdown-toggle tooltip="Settings" tooltip-placement="bottom">
                                    <span class="mdi mdi-settings"></span>
                                </a>
                                <ul uib-dropdown-menu class="dropdown-menu">
                                    <li class="dropdown-header">Settings</li>
                                    <li><a href="@Url.Action("Index", "SiteSettings", new { Area = "SiteSettings" })"><span>Site Settings</span></a></li>
                                    <li><a href="@Url.Action("Index", "SiteAdmin", new { Area = "Administration" })"><span>Site Administration</span></a></li>
                                 </ul>
                            </li>
                            <!--End of Settings Dropdown-->
                            <!--LoginPartial Dropdown-->
                            <li id="loginDropDown" class="dropdown hidden-md" uib-dropdown>@Html.Partial("_LoginPartial") </li>
                            <!--End of LoginPartial Dropdown-->
                        </ul>
                    </div>
                    <!--End of Desktop Navbar-->
                    <!--Mobile NavBar-->
                    @*<div id="mobile-nav" class="visible-xs-block">
                        <div class="dropdown open mobilenav-download-menu">
                            <ul class="dropdown-menu">
                                <li class="dropdown" uib-dropdown>
                                    <a href="javascript:void(0);" class="nav-icon dropdown-toggle" uib-dropdown-toggle tooltip="Settings" tooltip-placement="bottom">
                                        <span class="mdi mdi-settings"></span>
                                    </a>
                                    <ul uib-dropdown-menu class="dropdown-menu">
                                        <li class="dropdown-header">Settings</li>
                                        <li><a href="@Url.Action("Index", "SiteSettings", new { Area = "SiteSettings" })"><span>Site Settings</span></a></li>
                                        <li><a href="@Url.Action("Index", "SiteAdmin", new { Area = "Administration" })"><span>Site Administration</span></a></li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>*@
                    <!--End of Mobile NavBar-->
                </div>
            </div>
        </section>

好的，我收到错误，说我需要代码链接一个plunkr。

Answer 1

您可以为navbarheader手动定义类似于引导程序的样式。只需在 CSS 文件中添加这些样式，并在任何地方使用类，或者使用元素。

@media (min-width: 1000px) {
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
  float: left;
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
  .col-md-12 {
    width: 100%;
  }
  .col-md-11 {
    width: 91.66666667%;
  }
  .col-md-10 {
    width: 83.33333333%;
  }
  .col-md-9 {
    width: 75%;
  }
  .col-md-8 {
    width: 66.66666667%;
  }
  .col-md-7 {
    width: 58.33333333%;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-md-5 {
    width: 41.66666667%;
  }
  .col-md-4 {
    width: 33.33333333%;
  }
  .col-md-3 {
    width: 25%;
  }
  .col-md-2 {
    width: 16.66666667%;
  }
  .col-md-1 {
    width: 8.33333333%;
  }
 
  .pull-left {
    float: left !important;
  }
  
  }

您也可以根据需要添加其他课程或重命名，但对于中等尺寸的设备，这将是最佳做法。

希望这有帮助！

Navbar标题按钮在中等大小的屏幕中变长

1 个答案: