如何将此按钮放置在此导航栏中的右侧

Question

我是新手，正在学习 React。
我尝试将CodeSandBox 中的汉堡切换按钮设置为始终在右侧，但我遇到了问题。工具栏必须始终在右侧，如margin-right: 50px

我使用react-bootstrap NavBar。 如图所示，切换按钮必须在右侧，但它被卡住了。

当我设置margin-left: 100px; 时，上图中的按钮被推到切换按钮的顶部

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

我也想要margin-left，但如果我删除它看起来没问题：

我也使用<Form inline>，所以我将项目放在一行中，并且只有 2 列。 我尝试只制作一列，但它不起作用..

我尝试了很多组合来使切换按钮粘在右侧，但没有运气请指教。

Answer 1

如果您只是将这些元素包装在 class="wrapper" 中，在其中插入 div 并将此包装器的 justify-content 分配给 css 中的 space-around，那不是更好吗？我认为这样做会更容易，而且响应更友好。

Answer 2

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

但是，如果您只是打算将切换开关移动到右侧并且您刚刚定义了两个 Col 元素 (Columns)，您可以简单地使用 text-align 属性将其移动到其容器周围（在您的特定情况下：text-align: right;）。因此，如果您想使用 react-bootstrap 内置类来实现，您可以在切换容器上使用 text-right，如下所示：

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

另外，也不需要在form-inline 类中添加margin-left 属性，因为它只会将左列向右移动。

更新

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

我上面的沙盒我刚刚删除了Col项目并添加d-flex（这相当于display: flex;，你可以阅读更多关于flexbox的信息here）到父，这是导航栏本身。然后只需添加justify-content-between，以确保只要有额外空间可用，同一行中的项目之间总是有空间，最后垂直对齐我刚刚使用align-items-center。为了确保表单元素始终在同一行中，只需将flex-nowrap 添加到表单元素本身。好吧，较小视口中的元素将堆叠在一起，这是 flexbox 的正常行为，但您可以随意修改它。

Answer 3

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