我正試圖制作一個動態的移動網站，根據屏幕大小進行調整。

下面是navbar目前的功能:

寬度為766像素時:

768像素寬度:

990像素寬度:

992像素寬:

我基本上想剪下768 - 990px的舞臺，因為它看起來不太好！

我已經檢查了這個元素，并在引導默認css中發現了這個代碼，它出現在768px的屏幕寬度上:

media="screen"
@media (min-width: 768px)
.container>.navbar-header, .container>.navbar-collapse {
    margin-right: 0;
    margin-left: 0;
}

我試著把最小寬度改為992像素，但這似乎沒有任何作用。

下面是我的導航條代碼:

<nav class="navbar navbar-default" role="navigation"> 
            <div class="container">
                <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                    <a class="navbar-brand" href="index.html">Welsh for Adults</a>
                </div>

                <div class="collapse navbar-collapse navbar-ex1-collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="index.html"><span class="glyphicon glyphicon-home" style="font-size:85%;"></span> Home</a></li>
                        <li><a href="taster.html">Welsh Taster Course</a></li>
                        <li><a href="courses.html">Courses</a></li>
                        <li><a href="activities.html">Informal Learning Activities</a></li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li><button type="button" class="btn btn-danger navbar-btn change-lang" data-lang="cym">Cymraeg</button></li>
                    </ul>
                </div>

            </div>
        </nav>

只需在一個地方覆蓋媒體查詢，如下所示:

@media (min-width: 768px){
.container {
width: 100% !important;
}

小提琴

只需確保應用一個導航和id；在CSS中使用它。我相信你不會希望這種行為適用于所有人。頁面上的容器。

navbar.css大概有512行，少用更輕松！所有的最小寬度從768到你的最小寬度，992像素或1000像素或其他。您必須在css中的適當位置更改舊的css在768px中斷。

http://jsbin.com/uwAyeGUy/2/edit