引导，从navbar中删除响应 [英] Bootstrap, remove responsive from navbar

问题描述

所以，我只有一个简单的导航栏与Bootstrap：

 < div class =navbar navbar-inverse navbar- static-toprole =navigation> 
< div class =container> 
< div class =navbar-header> 
< a class =navbar-brandhref =＃> LOGO< / a> 
< / div> 
< div> 
< ul class =nav navbar-nav navbar-right> 
< li class =dropdown> 
< a href =＃class =dropdown-toggledata-toggle =dropdown>菜单< b class =caret>< / b>< / a& 
< ul class =dropdown-menu> 
< li>< a href =＃>讯息< / a>< / li> 
< li>< a href =＃>Paramètres< / a>< / li> 
< li>< a href =＃> Mes frenks< / a>< / li> 
< li class =divider>< / li> 
< li>< a href =＃>信号器错误< / a>< / li> 
< li>< a href =＃>条件générales< / a>< / li& 
< / ul> 
< / li> 
< / ul> 
 
< form class =navbar-form navbar-rightrole =form> 
< div class =form-group> 
< input class =form-controltype =textplaceholder =Recherche> 
< / div> 
< / form> 
 
< / div><！ -  /。nav-collapse  - > 
< / div> 
< / div> 
  

检查小提琴： jsfiddle

我不想当你改变窗口的大小时，导航栏被分成多行。
在我的例子中，下拉菜单和输入放在下面。

我想导航栏被压扁，保持在同一行..任何想法？

解决方案

可以做到。

我只是下载Bootstrap 3源代码并通过他们的CSS文件进行扫描。他们有 @media 查询不同的屏幕尺寸（如您所知）。我简单地复制了他们用于 @media（min-width：768px）的所有CSS规则，并将它们放入一个新规则： @media -width：768px）

这里是所以你可以使用它，因为它是：

CSS ： b .navbar-header {
float：left;
}

.navbar {
border-radius：4px;
min-width：400px;
}

.nav-tabs-justified> li> a {
border-bottom：1px solid #ddd;
border-radius：4px 4px 0 0;
}
.nav-tabs-justified> .active> a，
.nav-tabs-justified> .active> a：hover，
.nav-tabs-justified> .active> a：focus {
border-bottom-color：#fff;
}

.nav-justified> li {
display：table-cell;
width：1％;
}
.nav-justified> li> a {
margin-bottom：0;
}

.nav-tabs.nav-justified> li> a {
border-bottom：1px solid #ddd;
border-radius：4px 4px 0 0;
}
.nav-tabs.nav-justified> .active> a，
.nav-tabs.nav-justified> .active> a：hover，
.nav-tabs.nav-justified> .active> a：focus {
border-bottom-color：#fff;
}

.nav-tabs.nav-justified> li {
display：table-cell;
width：1％;
}
.nav-tabs.nav-justified> li> a {
margin-bottom：0;
}

.navbar-right .dropdown-menu {
right：0;
left：auto;
}
.navbar-right .dropdown-menu-left {
right：auto;
left：0;
}
.container {
min-width：400px;
}

.navbar-collapse {
width：auto;
border-top：0;
box-shadow：none;
}
.navbar-collapse.collapse {
display：block！important;
height：auto！important;
padding-bottom：0;
overflow：visible！important;
}
.navbar-collapse.in {
overflow-y：visible;
}
.navbar-fixed-top .navbar-collapse，
.navbar-static-top .navbar-collapse，
.navbar-fixed-bottom .navbar-collapse {
padding-right：0;
padding-left：0;
}

.container> .navbar-header，
.container-fluid> .navbar-header，
.container> .navbar-collapse，
.container-fluid> .navbar-collapse {
margin-right：0;
margin-left：0;
}

.navbar-static-top {
border-radius：0;
}

.navbar-fixed-top，
.navbar-fixed-bottom {
border-radius：0;
}

.navbar-toggle {
display：none;
}

.navbar-nav {
float：left;
margin：0;
}
.navbar-nav> li {
float：left;
}
.navbar-nav> li> a {
padding-top：15px;
padding-bottom：15px;
}
.navbar-nav.navbar-right：last-child {
margin-right：-15px;
}

.navbar-left {
float：left！important;
}
.navbar-right {
float：right！important;
}

.navbar-form .form-group {
display：inline-block;
margin-bottom：0;
vertical-align：middle;
}
.navbar-form .form-control {
display：inline-block;
width：auto;
vertical-align：middle;
}
.navbar-form .control-label {
margin-bottom：0;
vertical-align：middle;
}
.navbar-form .radio，
.navbar-form .checkbox {
display：inline-block;
padding-left：0;
margin-top：0;
margin-bottom：0;
vertical-align：middle;
}
.navbar-form .radio input [type =radio]，
.navbar-form .checkbox input [type =checkbox] {
float：none ;
margin-left：0;
}
.navbar-form .has-feedback .form-control-feedback {
top：0;
}

.navbar-form {
width：auto;
padding-top：0;
padding-bottom：0;
margin-right：0;
margin-left：0;
border：0;
-webkit-box-shadow：none;
box-shadow：none;
}
.navbar-form.navbar-right：last-child {
margin-right：-15px;
}

.navbar-text {
float：left;
margin-right：15px;
margin-left：15px;
}
.navbar-text.navbar-right：last-child {
margin-right：0;
}
}

注意，我注释掉了 .container 规则，因此它不会有固定的大小。
这是您的小提琴与新CSS的副本： http://jsfiddle.net/Fraximus/5KAXf/1/

让我知道如果它工作。

So, i have just a simple navbar with Bootstrap :

<div class="navbar navbar-inverse navbar-static-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">LOGO</a>
        </div>
        <div>
          <ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Messages</a></li>
                <li><a href="#">Paramètres</a></li>
                <li><a href="#">Mes frenks</a></li>
                <li class="divider"></li>
                <li><a href="#">Signaler un bug</a></li>
                <li><a href="#">Conditions générales</a></li>
              </ul>
            </li>
          </ul>

        <form class="navbar-form navbar-right" role="form">
            <div class="form-group">
                <input class="form-control" type="text" placeholder="Recherche">
            </div>
        </form>

        </div><!--/.nav-collapse -->
      </div>
    </div>

Check fiddle : jsfiddle

I do not want that when you change the size of the window, the navbar is divided into multiple lines. In my example, the dropdown menu and input is placed below.

I want the navbar is just crushed up, staying on the same line .. any idea?

解决方案

It can be done. Not too complicated actually.

I simply downloaded the Bootstrap 3 source code and scanned through their CSS file. They have @media queries for different screen sizes (as you already know). I simply copied all the CSS rules they use for @media (min-width: 768px) and put them in a new rule: @media (max-width: 768px)

Here it is so you can use it as it is:

CSS:

@media (max-width: 768px) {
    .navbar-header {
        float: left;
    }

    .navbar {
        border-radius: 4px;
        min-width: 400px;
    }

    .nav-tabs-justified > li > a {
        border-bottom: 1px solid #ddd;
        border-radius: 4px 4px 0 0;
    }
    .nav-tabs-justified > .active > a,
    .nav-tabs-justified > .active > a:hover,
    .nav-tabs-justified > .active > a:focus {
        border-bottom-color: #fff;
    }

    .nav-justified > li {
        display: table-cell;
        width: 1%;
    }
    .nav-justified > li > a {
        margin-bottom: 0;
    }

    .nav-tabs.nav-justified > li > a {
        border-bottom: 1px solid #ddd;
        border-radius: 4px 4px 0 0;
    }
    .nav-tabs.nav-justified > .active > a,
    .nav-tabs.nav-justified > .active > a:hover,
    .nav-tabs.nav-justified > .active > a:focus {
        border-bottom-color: #fff;
    }

    .nav-tabs.nav-justified > li {
        display: table-cell;
        width: 1%;
    }
    .nav-tabs.nav-justified > li > a {
        margin-bottom: 0;
    }

    .navbar-right .dropdown-menu {
        right: 0;
        left: auto;
    }
    .navbar-right .dropdown-menu-left {
        right: auto;
        left: 0;
    }
    .container {
        min-width: 400px;
    }

    .navbar-collapse {
        width: auto;
        border-top: 0;
        box-shadow: none;
    }
    .navbar-collapse.collapse {
        display: block !important;
        height: auto !important;
        padding-bottom: 0;
        overflow: visible !important;
    }
    .navbar-collapse.in {
        overflow-y: visible;
    }
    .navbar-fixed-top .navbar-collapse,
    .navbar-static-top .navbar-collapse,
    .navbar-fixed-bottom .navbar-collapse {
        padding-right: 0;
        padding-left: 0;
    }

    .container > .navbar-header,
    .container-fluid > .navbar-header,
    .container > .navbar-collapse,
    .container-fluid > .navbar-collapse {
        margin-right: 0;
        margin-left: 0;
    }

    .navbar-static-top {
        border-radius: 0;
    }

    .navbar-fixed-top,
    .navbar-fixed-bottom {
        border-radius: 0;
    }

    .navbar-toggle {
        display: none;
    }

    .navbar-nav {
        float: left;
        margin: 0;
    }
    .navbar-nav > li {
        float: left;
    }
    .navbar-nav > li > a {
        padding-top: 15px;
        padding-bottom: 15px;
    }
    .navbar-nav.navbar-right:last-child {
        margin-right: -15px;
    }

    .navbar-left {
        float: left !important;
    }
    .navbar-right {
        float: right !important;
    }

    .navbar-form .form-group {
        display: inline-block;
        margin-bottom: 0;
        vertical-align: middle;
    }
    .navbar-form .form-control {
        display: inline-block;
        width: auto;
        vertical-align: middle;
    }
    .navbar-form .control-label {
        margin-bottom: 0;
        vertical-align: middle;
    }
    .navbar-form .radio,
    .navbar-form .checkbox {
        display: inline-block;
        padding-left: 0;
        margin-top: 0;
        margin-bottom: 0;
        vertical-align: middle;
    }
    .navbar-form .radio input[type="radio"],
    .navbar-form .checkbox input[type="checkbox"] {
        float: none;
        margin-left: 0;
    }
    .navbar-form .has-feedback .form-control-feedback {
        top: 0;
    }

    .navbar-form {
        width: auto;
        padding-top: 0;
        padding-bottom: 0;
        margin-right: 0;
        margin-left: 0;
        border: 0;
        -webkit-box-shadow: none;
                box-shadow: none;
    }
    .navbar-form.navbar-right:last-child {
        margin-right: -15px;
    }

    .navbar-text {
        float: left;
        margin-right: 15px;
        margin-left: 15px;
    }
    .navbar-text.navbar-right:last-child {
        margin-right: 0;
    } 
}

Note that I commented out the .container rules so it won't have a fixed size anymore. Here's a copy of your fiddle with the new CSS: http://jsfiddle.net/Fraximus/5KAXf/1/

Let me know if it works.

这篇关于引导，从navbar中删除响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！