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

Question

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

我用的是react-bootstrapNavBar。如图所示，切换按钮必须在右侧，但卡住了。

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

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

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

我也使用 <Form inline>，所以我将项目排成一行并且只有 2 列。我试着只做一个专栏，但没有成功..

我尝试了很多组合来使切换按钮固定在右侧，但没有成功，请指教。

Answer 1

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

Answer 2

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

但是如果您只是想将切换开关移到右侧并且您刚刚定义了两个 Col 元素 (Columns)，您可以简单地将它移动到它的周围text-align 属性 的容器（在您的特定情况下：text-align: right;）。所以如果你想用 react-bootstrap built-in classes 你可以在切换容器上使用 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-inlineclass中不需要添加margin-left属性，因为它只会将左边的列向右移动。

更新

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

我在上面的沙箱中删除了 Col 项并添加了 d-flex （这相当于 display: flex;，您可以阅读更多关于 flexbox here) 到父级，即导航栏本身。然后只需添加 justify-content-between ，确保只要有额外的 space 可用，同一行中的项目之间总是有 space ，最后垂直对齐它们我刚刚使用 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;
}

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

How to position this button to the right in this Navbar

css

position

alignment

reactjs

react-bootstrap

更新