Css 如何在此导航栏中将此按钮定位到右侧

我对这一点还不熟悉，正在学习如何应对。 我试着将汉堡切换按钮设置为总是向右，但我有问题。toogle必须始终位于右侧，并具有相同的右边距：50px

我使用导航栏。 如图所示，切换按钮必须位于右侧，但卡住了

当我设置左边距时：100px；上图中的按钮按在切换按钮的顶部

 .form-inline {
    width: 100%;
    margin-left: 100px;
  }

我还希望留有边距，但如果我去掉边距，它看起来还可以：

我也使用，所以我有一行中的项目，只有2列。 我试着只写一个专栏，但没有成功

---

我尝试了大量的组合，使切换按钮粘在右侧，但没有运气，请给出建议。

如果您将这些元素包装在class=wrapper中，在其中插入div，并将此包装的justify内容分配给css中的空格，不是更好吗？我认为这样做会更容易，响应也更友好。

如果您只是将这些元素包装在class=wrapper中，在其中插入div，并将此包装的justify内容分配给css中的空格，不是更好吗？我认为这样做更容易，响应也更友好。

好吧，有一些方法可以解决您当前的问题，甚至可以使您的代码结构更好。正如@pat早些时候所说的，最好使用网格工具（如flexbox及其相关属性）来控制物品的位置

但是，如果您只是想将切换移动到右侧，并且刚刚定义了两个Col元素列，那么您只需在特定的情况下使用text align属性：text align:right；在其容器周围移动它即可；。因此，如果要使用react引导内置类执行此操作，可以使用toggle容器上的文本，如下所示：

/*navbar品牌*/ /*第一列项目*/ 此外，不需要向表单内联类添加marginleft属性，因为它只会将左列向右移动

使现代化 正如我前面所说，为了管理块，最好使用网格工具。因此，我只是创建了一个沙箱，您可以在这里看到：

---

在上面的沙盒中，我刚刚删除了Col项并添加了d-flex，这相当于display:flex；，您可以向父对象（即导航栏本身）阅读有关flexbox的更多信息。然后只需添加justify内容，确保在同一行中的项目之间始终有空间，只要有额外的可用空间，最后垂直对齐它们，我刚才使用了align items center。为了确保表单元素始终在同一行中，只需将flex nowrap添加到表单元素本身。嗯，较小视口中的元素将堆叠在彼此的顶部，这是flexbox的正常行为，但您可以根据需要对其进行修改。

嗯，有一些方法可以解决您当前的问题，甚至使您的代码结构更好。正如@pat早些时候所说的，最好使用网格工具（如flexbox及其相关属性）来控制物品的位置

<Navbar expand="false" bg="dark" variant="dark" fixed="top" collapseOnSelect className={`navbar`}>
  /* navbar brand */
  <Col>
      /* first col items */
  </Col>
  <Col className="toggle-nav">
      <Navbar.Toggle aria-controls="responsive-navbar-nav" />
  </Col>
</Navbar>


.toggle-nav {
    display: flex;
    justify-content: flex-end;
}

但是，如果您只是想将切换移动到右侧，并且刚刚定义了两个Col元素列，那么您只需在特定的情况下使用text align属性：text align:right；在其容器周围移动它即可；。因此，如果要使用react引导内置类执行此操作，可以使用toggle容器上的文本，如下所示：

/*navbar品牌*/ /*第一列项目*/ 此外，不需要向表单内联类添加marginleft属性，因为它只会将左列向右移动

使现代化 正如我前面所说，为了管理块，最好使用网格工具。因此，我只是创建了一个沙箱，您可以在这里看到：

---

在上面的沙盒中，我刚刚删除了Col项并添加了d-flex，这相当于display:flex；，您可以向父对象（即导航栏本身）阅读有关flexbox的更多信息。然后只需添加justify内容，确保在同一行中的项目之间始终有空间，只要有额外的可用空间，最后垂直对齐它们，我刚才使用了align items center。为了确保表单元素始终在同一行中，只需将flex nowrap添加到表单元素本身。嗯，较小视口中的元素将堆叠在彼此的顶部，这是flexbox的正常行为，但您可以根据需要对其进行修改。

您的意思是我可以放弃react引导导航栏并转到Html吗？您的意思是我可以放弃react引导导航栏并转到Html吗？谢谢！如果我去掉左边的边距：100px；从表单内联css，然后搜索和按钮跳回接近图像，我不希望我想要均匀间隔itemed@Kid嗯，在你的代码框中没有图像，所以我认为没有。让我为您的具体情况提供一个更好的解决方案，而不是让每个人

<Navbar expand="false" bg="dark" variant="dark" fixed="top" collapseOnSelect className={`navbar`}>
  /* navbar brand */
  <Col>
      /* first col items */
  </Col>
  <Col className="toggle-nav">
      <Navbar.Toggle aria-controls="responsive-navbar-nav" />
  </Col>
</Navbar>


.toggle-nav {
    display: flex;
    justify-content: flex-end;
}

---

他完全对齐了。因为边距在不同的视角下效果不太好。@Kid，我只是更新了答案，为你的案例提供了一个更好的方法。你是一个魔术师，谢谢，这太完美了！我必须阅读flexbox，在您的帮助下，我还将logi插入flex nowrap，谢谢！：只需要修复媒体查询cssThanks！如果我去掉左边的边距：100px；从表单内联css，然后搜索和按钮跳回接近图像，我不希望我想要均匀间隔itemed@Kid嗯，在你的代码框中没有图像，所以我认为没有。让我为您的具体情况提供一个更好的解决方案，而不是使所有内容完美地对齐。因为边距在不同的视角下效果不太好。@Kid，我只是更新了答案，为你的案例提供了一个更好的方法。你是一个魔术师，谢谢，这太完美了！我必须阅读flexbox，在您的帮助下，我还将logi插入flex nowrap，谢谢！：只需要修复媒体查询css