Css 带动态搜索框的引导导航栏

我试图找出如何使上述代码在>768px和<768px的显示器上运行良好。现在对于768px以下的分辨率来说效果很好，但对于768px以上的分辨率，我无法让它发挥作用

这就是我想做的：

分辨率高于768px-整页（剩余宽度为100%的搜索框）：

分辨率低于768px（仅搜索框可见）：

代码：

.navbar.navbar表单{
填充：0；
右边距：0；
左边距：0；
边界：0；
-webkit盒阴影：无；
盒影：无；
}
.清楚{
宽度：1%；
显示：表格列；
}
@介质（最大宽度：767px）{
.navbar.navbar表单{
左侧填充：15px；
右边填充：0；
}
.navbar.navbar表单.输入组{
右侧填充：15px；
}
.navbar.navbar表单.form控件{
边框右上角半径：4px；
边框右下半径：4px；
}
}

切换导航
走！

哎呀，你这里有个棘手的小问题。我花了一段时间，但我想我已经为你们找到了一个解决办法

首先，您需要执行以下操作：

• 将

  display:inline

  添加到

  表单组中

• 将

  display:table

  添加到

  输入组中

• 将

  宽度：1%

  添加到您的

  输入组btn

这些更改来自此问题（您需要什么，但将搜索栏保留在折叠菜单中）——

下一步需要做的更改是在768px断点以上时进行的，否则会弄乱折叠菜单

@media(min-width:768px) {
    .container-fluid {
        display: flex;
    }
    .navbar-header {
        flex: 1;
    }
}

最后，您需要从

navbar表单中删除
navbar right

-还包括一个嵌入式代码段


.navbar.navbar表单{
填充：0；
右边距：0；
左边距：0；
边界：0；
-webkit盒阴影：无；
盒影：无；
}
.清楚{
宽度：1%；
显示：表格列；
}
@介质（最大宽度：767px）{
.navbar.navbar表单{
左侧填充：15px；
右边填充：0；
}
.navbar.navbar表单.输入组{
右侧填充：15px；
}
.navbar.navbar表单.form控件{
边框右上角半径：4px；
边框右下半径：4px；
}
}
@介质（最小宽度：768px）{
.容器液体{
显示器：flex；
}
.导航栏标题{
弹性：1；
}
}

切换导航
走！




也许我错了，但这似乎很好。如果你是整页（>768px），那么搜索栏的宽度不是100%（至少在chrome上不是）。这个问题是正确的