html - 导航栏标题按钮在中等尺寸的屏幕上变长

Question

大屏(好)

中等屏幕(差)

小屏幕(好)

小屏幕按钮下拉(坏)

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

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 手动定义类似于 bootstrap 的样式。只需将这些样式添加到您的 CSS 文件中，然后在您想要的任何地方或任何 Element 上使用这些类。

@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;
  }
  
  }

如果需要，您还可以添加其他类或根据您的用途重命名，但对于中型设备，这将是最佳做法。

希望这对您有所帮助!