如何将navbar置于react-bootstrap中心

发布时间：2020-12-15 20:20:08 所属栏目：百科来源：网络整理

导读：我希望这是一个简单的问题,我看到有些人提出了类似的关于bootstrap的问题.我无法将这些答案中的一个解决为适合我的解决方案,我认为在任何情况下都可能有更简单的反应引导答案. 代码示例如下：https://codesandbox.io/s/yq5jvl9lz9 当视口足够宽时,它就是这样

我希望这是一个简单的问题,我看到有些人提出了类似的关于bootstrap的问题.我无法将这些答案中的一个解决为适合我的解决方案,我认为在任何情况下都可能有更简单的反应引导答案.

代码示例如下：https://codesandbox.io/s/yq5jvl9lz9

当视口足够宽时,它就是这样的样子：

Navbar as produced by my Codesandbox code

这或多或少是我想要的：

What I'm shooting for

对你的帮助表示感谢！谢谢,Nat

编辑12/22/18：从下面@Cristian的信息开始,我修改了这个例子.我需要显示：除了宽度之外的内联块：100％.不幸的是,在较大的屏幕尺寸下,“品牌”现在与菜单项不一致：

misaligned navbar

任何其他修复赞赏！我发布了这个作为fresh question,所以答案可以去那里(和接受答案的点！)

解决方法

也许它已经晚了一年但我有相同的 problem并且找不到答案.我发现内联css对我不起作用,所以我必须定义一个用于样式的自定义类.

您的问题的解决方案是使用text-align：center为navbar-brand或任何其他元素设置样式,但是,除非您还指定width：100％,否则这将不起作用.请访问我提供的链接,以查看我对问题的处理方法.

这是OP最后编辑后的编辑：

我找到了两种方法来做你想要达到的目标.一个不是很敏感,我不建议.

第一种方法：

删除CSS中的所有内容并保留

.center-navbar {
  width:30%;
  margin-left: 35%;
}

第二种方法：

删除css中的所有内容,而不是使用React Bootstrap提供的layout grid.现在你在Index.js中的代码看起来像这样：

import React from "react";
import { render } from "react-dom";
import { Navbar,Nav,NavItem,NavDropdown,Glyphicon,Grid,Row,Col } from "react-bootstrap";
import "./index.css";

const App = () => (
  <div>
    <Grid>
      <Row className="show-grid">
        <Col xs={4} md={4}>
        </Col>
        <Col xs={4} md={4}>
          <div>
            <Navbar collapSEOnSelect>
              <Navbar.Header>
                <Navbar.Brand>Logo</Navbar.Brand>
                <Navbar.Toggle />
              </Navbar.Header>
              <Navbar.Collapse>
                <Nav>
                  <NavItem eventKey="a" href="#">
                    Link1
            </NavItem>

                  <NavItem eventKey="b" href="#">
                    Link2
            </NavItem>
                </Nav>
              </Navbar.Collapse>
            </Navbar>
          </div>
        </Col>
      </Row>
    </Grid>
    <h2 style={{ textAlign: "center" }}>This is some text</h2>
  </div>
);

render(<App />,document.getElementById("root"));

但是有一个问题.我建议你学习W3C(万维网联盟)并理解为什么不建议将Logo放在屏幕中间.如果你看大多数网站(Stackoverflow,亚马逊,eBay,列表继续),他们不会在中间使用徽标,而是在左侧.这是一个标准,所以这就是为什么没有太多的建议.我不建议使用我提供的解决方案,除非这是完成您想要实现的目标的唯一方法.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!