Html 引导折叠菜单有2行

我正在建立这个网站

我有一个带引导的折叠导航栏构建。但是当我尝试调整窗口大小时，我得到如下结果：

正如你所看到的（你可以试一下），导航栏现在有两条线，它看起来是有线的（实际的问题是它在Iphone和Ipad上看起来像这样），然后你可以调整它的大小，它会像我想的那样折叠

您只需在开发人员工具中查看html代码即可查看代码。

---

因此，我不会在这里发布它，以使qstion变得干净和小。但如果您愿意，我也可以在这里发布代码=）

当导航栏折叠时，您需要更改断点

例如，这应该是可行的：

@media only screen and (min-width: 1200px) {
    .collapse {
        display: block;
    }
    .navbar-toggle {
        display: none;
    }
}

@media only screen and (max-width: 1200px) {
     .collapse {
          display: none;
      }
      .navbar-toggle {
         display: block;
      }
}

因为它在1200像素宽后浮动（因为它太长了）

**对不起，我弄错了。。。现在就试试：）***

我最终得到了这个（公平地说，这是一个相当糟糕的解决办法） 在页面加载时，如果我的window.width小于1200px，我只会隐藏长文本

function hideSlogan() {
    if($(window).width() <1200) {$('.slogan').hide()} 
};
hideSlogan();

函数hideSlogan（）{
如果（$（window）.width（）转到从移动导航开始的CSS规则；这些规则可以调整以使导航栏在不同断点处折叠

在旁注中，导航中有一个额外的断开列表标签，其位置为导航条折叠div中的将显示以下行为：

如果在移动设备中展开菜单，然后展开视口，
navbar
将恢复到行高：60px，除非刷新浏览器。这可能无关紧要，但由于您试图更改折叠断点，因此值得一提

**我还将内联样式与其他CSS规则一起移动


@导入url(http://fonts.googleapis.com/css?family=Open+Sans:400700800）；
@导入url(http://fonts.googleapis.com/css?family=Libre+巴斯克维尔：400斜体）；
* {
保证金：0；
填充：0px；
字体系列：“开放式Sans”，无衬线；
}
身体{
背景：#fff；
保证金：0；
颜色：#42413e；
填充顶部：50px；
}
/*自举修改*/
.navbar右a.btn橙色{
页边顶部：-5px；
}
.btn橙色{
背景#f27242；
边界半径：2px；
颜色：白色；
字体大小：12px；
字号：700；
}
.btn橙色：悬停{
背景：#e16a3e；
颜色：白色；
}
.navbar默认值.navbar品牌{
高度：50px；
填充：10px 15px；
字体大小：20px；
线高：22px；
字号：700；
}
.navbar.navbar-default{
背景色：#ffffff；
边框颜色：#e7e7e7；
}
.navbar默认值.navbar nav>.active>a，
.navbar默认值.navbar nav>.active>a:悬停，
.navbar默认值.navbar nav>.active>a:焦点{
颜色：#f27242；
背景色：透明；
}
.navbar默认值.navbar nav>li>a{
颜色：#ccc；
}
.navbar默认值。navbar右侧{
顶部填充物：5px
}
.navbar默认li.下拉列表a{
颜色：黑色；
}
.navbar默认span.head-title{
线高：60px；
}
.navbar默认值.navbar右侧.下拉菜单{
右：自动；
左：0；
}
.导航栏右李.联系方式a{
颜色：#42413e；
}
/****移动导航栏******/
@介质（最大宽度：1200px）{
.自定义导航栏.导航栏标题{
浮动：无；
}
.自定义导航栏。导航栏左侧，
.自定义导航栏.导航栏右侧{
浮动：无！重要；
}
.自定义导航栏.导航栏切换{
显示：块；
}
.自定义导航栏.导航栏折叠{
边框顶部：1px实心透明；
框阴影：插入0 1px 0 rgba（255、255、255、0.1）；
溢出x：隐藏；
}
.custom-navbar.navbar-fixed-top{
排名：0；
边框宽度：0 0 1px；
}
.自定义导航栏.导航栏-折叠.折叠{
显示：无！重要；
}
.自定义导航栏.导航栏导航{
浮动：无！重要；
利润上限：7.5px；
}
.自定义导航栏.导航栏导航>li{
浮动：无；
}
.自定义导航栏.导航栏导航>li>a{
填充顶部：10px；
垫底：10px；
}
.自定义导航栏.collapse.in{
显示：块！重要；
}
.自定义导航栏.导航栏导航.打开.下拉菜单{
位置：静态；
浮动：无；
宽度：自动；
边际上限：0；
背景色：透明；
边界：0；
-webkit盒阴影：无；
盒影：无；
}
.定制导航栏.导航栏品牌{
高度：55px；
填充：10px 15px；
字体大小：20px；
线高：22px；
字号：700；
}
}

Переключить навигацию
Надежный партнер - качественные решения!

























如您所见，我丢失了徽标，还出现了一些视网膜显示错误（我可以删除视网膜库，这样就少了一个问题）仍然没有=（请再次查看test.html。现在它显示数据切换，但不会隐藏，也不会打开数据切换谢谢。我将在周一尝试此操作，因为明天我将离开笔记本电脑）），今天太晚了=）