如何扩展bootstrap 3.3.6媒体查询

时间:2016-03-08 19:59:01

标签: asp.net-mvc twitter-bootstrap-3

我正在使用bootstrap,移动导航的默认值是768px。我想把它扩展到979px而不是?我有几个小时的搜索和尝试,但没有运气。有人可以帮我解决这个问题吗?

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12">
                <div class="col-md-4" style="background-color:coral;">
                    <div id="divLogo" class="pull-left">
                        <img src="~/Images/logo.png" />
                    </div>
                </div>
                <div class="col-lg-8" style="background-color:crimson;">
                    <div id="divMenuRight">
                        <div class="navbar">
                            <button type="button" class="navbar-toggle btn btn-navbar-highlight btn-large btn-primary" data-toggle="collapse" data-target=".navbar-collapse">
                                NAVIGATION <span class="icon-chevron-down icon-white"></span>
                            </button>

                            <div class="navbar-collapse collapse">
                                <ul class="nav nav-pills ddmenu">
                                    <li class="active">@Html.ActionLink("Home", "Index", "Home")</li>

                                    <li class="dropdown">
                                        <a href="#" data-toggle="dropdown" class="dropdown-toggle">Transport <b class="caret"></b></a>
                                        <ul class="dropdown-menu">
                                            <li>@Html.ActionLink("Medicin", "Medicin", "Home")</li>
                                            <li>@Html.ActionLink("Køl / Varme / Frost", "Temperaturkontrolleret", "Home")</li>
                                            <li>@Html.ActionLink("ADR", "ADR", "Home")</li>
                                            <li>@Html.ActionLink("Express", "Express", "Home")</li>
                                            <li>@Html.ActionLink("Flytninger", "Flytninger", "Home")</li>
                                            <li>@Html.ActionLink("SLV", "SLV", "Home")</li>
                                            <li>@Html.ActionLink("Dyr", "Dyr", "Home")</li>
                                            <li>@Html.ActionLink("Håndvåben", "Weapons", "Home")</li>
                                            <li>@Html.ActionLink("England Tur/Retur", "TurRetur", "Home")</li>
                                        </ul>
                                    </li>

                                    <li>@Html.ActionLink("Priser", "Priser", "Home")</li>
                                    <li>@Html.ActionLink("Nyheder", "Nyheder", "Home")</li>
                                    <li>@Html.ActionLink("Kontakt", "Kontakt", "Home")</li>
                                    <li>@Html.ActionLink("Job", "Vognmand", "Home")</li>
                                    <li>
                                        <a class="hideButtonDk" href="@Url.Action("Change", "Home", new { Lang = "da"})">
                                            <img src="@Url.Content("~/Images/icon_uk.png")" />
                                        </a>
                                    </li>
                                </ul>

                            </div>

                        </div>
                    </div>
                </div>
        </div>
    </div>
</div>
    </nav>

1 个答案:

答案 0 :(得分:1)

您需要从他们的站点下载自定义构建的引导程序,并更新&#34;媒体查询断点&#34;部分。

更新&#34; screen-sm&#34;的宽度从768px变化到所需的值。

http://getbootstrap.com/customize/ enter image description here