Bootstrap，从导航栏中删除响应答案

【问题标题】：Bootstrap, remove responsive from navbarBootstrap，从导航栏中删除响应
【发布时间】：2014-02-12 20:03:15
【问题描述】：

所以，我只有一个带有 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>

检查小提琴：jsfiddle

我不希望当你改变窗口大小时，导航栏被分成多行。在我的示例中，下拉菜单和输入位于下方。

我希望导航栏被压碎，保持在同一条线上..有什么想法吗？

【问题讨论】：

看看这个：stackoverflow.com/a/18902276/973155
这不是我想要的。我想要一个响应式，但在调整大小时没有多行...*

标签： html css twitter-bootstrap

【解决方案1】：

这是可以做到的。实际上并不太复杂。

我只是下载了 Bootstrap 3 源代码并扫描了他们的 CSS 文件。他们有针对不同屏幕尺寸的@media 查询（如您所知）。我只是复制了他们用于@media (min-width: 768px) 的所有 CSS 规则并将它们放入一个新规则中：@media (max-width: 768px)

在这里，您可以按原样使用它：

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;
    } 
}

请注意，我注释掉了 .container 规则，因此它不再具有固定大小。这是带有新 CSS 的 fiddle 的副本：http://jsfiddle.net/Fraximus/5KAXf/1/

让我知道它是否有效。

【讨论】：

嗯，是的，它好多了 :) 但是您认为可以为导航栏指定最小尺寸吗？如果您将窗口的大小调整得非常小，请检查您的小提琴......如果导航栏可以在窗口非常小时停止移动，那就太酷了:)
比恩河畔！只需更改注释掉的.container 规则。例如，我们可以写 min-width: 400px; 而不是 width: 750px;。我将编辑答案以反映这一变化。
我们还需要将min-width: 400px; 规则添加到.navbar 元素以正确修复它。更新了代码。
是的，非常好:) 谢谢！我稍后测试，我现在不能，谢谢;)
骇人的方式。如何保持导航栏响应并拥有另一个不响应的导航栏？

【解决方案2】：

只需将.navbar-expand 类添加到您的导航栏，它就不会崩溃。

导航栏可以使用.navbar-toggler、.navbar-collapse 和 .navbar-expand{-sm|-md|-lg|-xl}classes 内容改变时折叠在按钮后面。结合其他实用程序，您可以轻松选择何时显示或隐藏特定元素。

对于永不折叠的导航栏，添加 .navbar-expand 类导航栏。对于总是崩溃的导航栏，不要添加任何.navbar-expand 类。

来自https://getbootstrap.com/docs/4.1/components/navbar/#responsive-behaviors

【讨论】：

这是最好的方法！谢谢

【解决方案3】：

这为我完成了工作：

http://getbootstrap.com/examples/non-responsive/non-responsive.css

刚刚添加了这些，整个事情就恢复了正常

【讨论】：

【解决方案4】：

如何禁用 BOOTSTRAP SASS / SCSS / LESS 的响应

使用已编译的引导程序版本 https://github.com/twbs/bootstrap-sass 很简单，只需在BEFORE 编译它之前添加这个变量。

SASS/SCSS

$grid-float-breakpoint:1px; 
$screen-xs:1px;
$screen-sm:2px;
$screen-md:3px;
$screen-lg:9999px;

少

@grid-float-breakpoint:1px; 
@screen-xs:1px;
@screen-sm:2px;
@screen-md:3px;
@screen-lg:9999px;

从标题中删除“视口”

<meta name="viewport" content="width=device-width, initial-scale=1">

【讨论】：

【解决方案5】：

可能会有所帮助。我想避免在小屏幕上垂直项目对齐。这是我所做的：将 nav-flat 类添加到根 ul 元素

<ul class="nav navbar-nav nav-flat">

还有这个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; }
}

【讨论】：