Javascript 在同一导航栏中引导多个折叠开关

我刚刚开始尝试建立一个新的引导网站，并希望有一个单独的折叠切换搜索栏的一部分。基本上，在导航栏的右侧，我需要搜索栏切换，然后是菜单切换

我有以下问题：

我怎样才能使这两个按钮落下，使它们在右边挨着坐？其中一个似乎现在坐在中间，我不知道为什么。

由于我将表单分隔为不同的DIV，它似乎不再与页面的右侧对齐，因此有点缩进。为什么呢

我一次只打开一个折叠菜单。例如，如果搜索打开，我点击菜单切换，我希望它关闭搜索，反之亦然

这就是我目前所拥有的。我知道这几乎是默认值，但我才刚刚开始，对bootstrap还很陌生

引导-预构建布局










搜寻
Dreamweaver引导
使用插入面板中的引导组件轻松构建页面

这是一个简单的英雄单元，一个简单的jumbotron风格的组件，用于唤起对特色内容或信息的额外关注



在蓝色容器外单击以选择此行。列始终包含在一行中行由灰色虚线和圆角表示。





卡片标题
一些基于卡片标题的快速示例文本，构成了卡片内容的大部分



卡片标题
卡片字幕
一些基于卡片标题的快速示例文本，构成了卡片内容的大部分




作为特色的

Cras justo odio
Dapibus ac设施在
eros的前庭

卡片标题
一些基于卡片内容的文本

Cras justo odio
Dapibus ac设施在





单击此处选择此列。始终将内容放在列中。列由蓝色虚线表示。
可以使用右侧的控制柄调整列的大小。拖动它以增加或减少列数。
您可以使用左侧的控制柄偏移列。拖动它以增加或减少偏移。




添加按钮
使用“插入”面板中的按钮组件快速将按钮添加到页面

信息按钮
成功按钮
添加徽章
使用插入面板，使用badge组件将badge添加到页面中

信息徽章危险徽章



页脚
版权及副本；2020年·；版权所有·

1:只需将它们添加到单独的节点即可。该容器具有一个弹性设置集，该设置将子节点对齐，以使用自动间距填充100%的宽度

为了克服这个问题，需要一个新的子节点或不同的flex设置

<div class="container">
  <a class="navbar-brand" href="#">Demo</a>
  <div>
    <a ...></a>
    <a ...></a>
  </div>
</div>

2.：class.container在左侧和右侧添加边距，它是flex container，根据用户的不同而不同。其他类（如.row）对此进行补偿，并使用负值重新排列内容


Bootstrap还提供了一些示例，可以帮助您使用ml auto在导航栏中进行对齐

3.：如果一次只打开一个