导航栏标题按钮在中型屏幕中变长答案

【问题标题】：Navbar header buttons get long in medium size screens导航栏标题按钮在中型屏幕中变长
【发布时间】：2017-02-11 01:05:19
【问题描述】：

大屏幕（好）

中等屏幕（坏）

小屏幕（好）

小屏幕按钮下拉（坏）

我尝试制作一个 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。

【问题讨论】：

更改 col-* 类以匹配每一侧的断点，您可以根据大小使用 xs-md-sm-lg。
我不使用任何。让我显示 HTML。我应该如何展示我的CSS？里面有很多东西，所以我不能只是去挑选导航栏的东西。
那是你的问题，你需要使用引导程序col- classes。
所以它会像 "
@Html.Partial("_LoginPartial")

【解决方案1】：

您可以为navbarheader 手动定义类似于引导程序的样式。只需将这些样式添加到您的 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;
  }
  
  }

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

希望这会有所帮助！

【讨论】：