相关疑难解决方法(0)

React-Bootstrap拉右导航栏

我正在使用react-bootstrap我的网站样式.我想添加Navbar所有元素镜像到右边的位置.

export default class XNavbar extends React.Component {
  render() {
return (
  <Navbar inverse fluid >

    <Navbar.Header>
      <Navbar.Brand>
        <a href="#">Brand</a>
      </Navbar.Brand>
      <Navbar.Toggle />
    </Navbar.Header>

    <Navbar.Collapse>
      <Nav>
        <NavItem eventKey={1} href="#">Hello</NavItem>
        <NavItem eventKey={2} href="#">World</NavItem>
      </Nav>
    </Navbar.Collapse>

  </Navbar>
)}
}
Run Code Online (Sandbox Code Playgroud)

结果是 在此输入图像描述

但我真正希望它是什么

[                                                           World Hello Brand ]
Run Code Online (Sandbox Code Playgroud)

我试着用pullRight<Navbar,但没有奏效.我也补充说<html dir="rtl">,但这也没有帮助.我该怎么做?

html reactjs react-bootstrap

12
推荐指数
4
解决办法
1万
查看次数

ml-auto没有将导航栏链接推向右侧

我正在使用reactstrap并一直关注此链接:

https://reactstrap.github.io/components/navbar/

在示例中,<nav className='ml-auto' navbar>正在<NavItem>向右推.但是,我正在尝试实现的(这与示例非常相似)是<NavItem>正在渲染的旁边<NavbarBrand>.

我已经检查了100次语法,看起来是正确的.我拥有的自定义CSS,它很少,似乎没有覆盖任何东西.控制台中的CSS看起来非常相似,它似乎受到以下因素的影响:

.ml-auto, .mx-auto {
    margin-left: auto!important;
}
Run Code Online (Sandbox Code Playgroud)

至少在示例中将其切换到控制台中,将其移到我应用程序中的<NavItem>旁边<NavbarBrand>(我不想要).以下是我要看的内容:

Reactstrap示例(正确的间距):

正确的间距 在此输入图像描述

我的应用程序的控制台(间距不正确): 在此输入图像描述 在此输入图像描述

如何在我的应用程序中获得正确的间距?

我真的不清楚影响margin-left: auto !important一个人而不是另一个人的工作.

css flexbox reactjs bootstrap-4 reactstrap

3
推荐指数
4
解决办法
4905
查看次数

标签 统计

reactjs ×2

bootstrap-4 ×1

css ×1

flexbox ×1

html ×1

react-bootstrap ×1

reactstrap ×1