Html Bootstrap，从导航栏中删除响应
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21738417/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap, remove responsive from navbar
提问by Clément Andraud
So, i have just a simple navbar with Bootstrap :
所以，我只有一个带有 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
检查小提琴：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?
我希望导航栏被压碎，保持在同一条线上..知道吗？
回答by Frax
It can be done. Not too complicated actually.
可以办到。其实也不算太复杂。
I simply downloaded the Bootstrap 3 source code and scanned through their CSS file. They have @mediaqueries 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)
我只是下载了 Bootstrap 3 源代码并扫描了它们的 CSS 文件。他们@media对不同的屏幕尺寸有查询（如您所知）。我只是简单地复制了他们使用的所有 CSS 规则@media (min-width: 768px)并将它们放在一个新规则中：@media (max-width: 768px)
Here it is so you can use it as it is:
在这里，您可以按原样使用它：
CSS:
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 .containerrules so it won't have a fixed size anymore.
Here's a copy of your fiddlewith the new CSS: http://jsfiddle.net/Fraximus/5KAXf/1/
请注意，我注释掉了.container规则，因此它不再具有固定大小。这是您使用新 CSS 的小提琴副本：http: //jsfiddle.net/Fraximus/5KAXf/1/
Let me know if it works.
让我知道它是否有效。
回答by avguchenko
Simply add .navbar-expandclass to your navbar, and it will never collapse.
只需将.navbar-expand类添加到您的导航栏，它就永远不会崩溃。
Navbars can utilize
.navbar-toggler,.navbar-collapse, and.navbar-expand{-sm|-md|-lg|-xl}classes to change when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.For navbars that never collapse, add the
.navbar-expandclass on the navbar. For navbars that always collapse, don't add any.navbar-expandclass.
当导航栏的内容折叠在按钮后面时，导航栏可以利用
.navbar-toggler、.navbar-collapse和.navbar-expand{-sm|-md|-lg|-xl}类进行更改。结合其他实用程序，您可以轻松选择何时显示或隐藏特定元素。对于永不折叠
.navbar-expand的导航栏，请在导航栏上添加该类。对于总是折叠的导航栏，不要添加任何.navbar-expand类。
from https://getbootstrap.com/docs/4.1/components/navbar/#responsive-behaviors
来自https://getbootstrap.com/docs/4.1/components/navbar/#responsive-behaviors
回答by WtFudgE
This did the job for me:
这为我完成了工作：
http://getbootstrap.com/examples/non-responsive/non-responsive.css
http://getbootstrap.com/examples/non-responsive/non-responsive.css
Just added those and the whole thing was back to normal
刚刚添加了那些，整个事情就恢复正常了
回答by lalo
HOW TO DISABLE RESPONSIVENESS FROM BOOTSTRAP SASS / SCSS / LESS
如何禁用引导程序 SASS / SCSS / LESS 的响应
With compiled versions of bootstrap https://github.com/twbs/bootstrap-sassis easy, just add this variables BEFOREcompiling it.
使用编译版本的引导程序 https://github.com/twbs/bootstrap-sass很容易，只需在编译之前添加此变量即可。
SASS / SCSS
SASS / SCSS
$grid-float-breakpoint:1px;
$screen-xs:1px;
$screen-sm:2px;
$screen-md:3px;
$screen-lg:9999px;
LESS
较少的
@grid-float-breakpoint:1px;
@screen-xs:1px;
@screen-sm:2px;
@screen-md:3px;
@screen-lg:9999px;
Remove "viewport" from header
从标题中删除“视口”
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
回答by DenisSt
May be it helps. I wanted to avoid vertical items alignment on small screen. Here is what I did: added nav-flat class to root ul element
可能会有所帮助。我想避免小屏幕上的垂直项目对齐。这是我所做的：将 nav-flat 类添加到根 ul 元素
<ul class="nav navbar-nav nav-flat">
<ul class="nav navbar-nav nav-flat">
And this css:
而这个CSS：
@media (max-width: 768px) {
.nav-flat li { display: inline; }
.nav-flat li a { display: inline; }
.dropdown-menu li { display: block; }
.dropdown-menu li a { display: block; }
}
