如何在 react-bootstrap 中居中导航栏 [英] How can I center a Navbar in react-bootstrap

问题描述

我希望这是一个简单的问题，我看到有些人已经问过关于引导程序的类似问题.我无法将其中一个答案用于适合我的解决方案，而且我认为在任何情况下都可能有一个更简单的 react-bootstrap 答案.

代码示例在这里:

这或多或少是我想要的:

您的帮助将不胜感激！谢谢，纳特

EDIT 12/22/18:从下面来自@Cristian 的信息开始，我修改了示例.除了 width: 100% 之外，我还需要 display: inline-block.不幸的是，在更大的屏幕尺寸下，品牌"现在与菜单项不对齐:

感谢任何其他修复！我已将此作为新问题发布，因此答案可以放在那里(以及已接受答案的积分！)

解决方案

也许晚了 1 年，但我有同样的 问题，找不到答案.我发现内联 css 对我不起作用，所以我必须定义一个用于样式的自定义类.

您的问题的解决方案是使用 text-align: center 设置导航栏品牌或任何其他元素的样式，但是，除非您还指定 width: 100%，否则这将不起作用.请访问我提供的链接以查看我解决问题的方法.

这是 OP 上次修改后的修改:

我找到了两种方法来完成您想要实现的目标.一个不是很敏感，我不推荐.

第一种方法:

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

.center-navbar {宽度:30%；左边距:35%；}

第二种方法:

删除 css 中的所有内容，而是使用 布局网格由 React Bootstrap 提供.现在你在 Index.js 中的代码看起来像这样:

从react"导入React；从react-dom"导入{渲染}；从react-bootstrap"导入 { Navbar, Nav, NavItem, NavDropdown, Glyphicon, Grid, Row, Col };导入./index.css"；const App = () =>(<div><网格><Row className="show-grid"><Col xs={4} md={4}></Col><Col xs={4} md={4}><div><Navbar collapseOnSelect><Navbar.Header><Navbar.Brand>徽标</Navbar.Brand><Navbar.Toggle/></Navbar.Header><Navbar.Collapse><导航><NavItem eventKey="a" href="#">链接1</NavItem><NavItem eventKey="b" href="#">链接2</NavItem></导航></Navbar.Collapse></导航栏>

</Col></行></网格><h2 style={{ textAlign: "center" }}>这是一些文字</h2>

);render(, document.getElementById("root"));

但是有一个问题.建议你研究一下W3C(万维网联盟)，了解为什么不建议在屏幕中间放置Logo.如果您查看大多数网站(Stackoverflow、Amazon、eBay，列表还在继续)，它们不会在中间使用徽标，而是在左侧使用.这是一个标准，这就是为什么没有太多建议的原因.我不建议使用我提供的解决方案，除非这正是您完成想要实现的目标的唯一方法.

I am hoping that this is a simple question, and I see that some folks have asked a similar question about bootstrap. I haven't been able to work one of those answers into a solution that works for me, and I think there may be a simpler react-bootstrap answer in any case.

Code example is here: https://codesandbox.io/s/yq5jvl9lz9

Here's what it looks like, when the viewport is wide enough:

Here's more-or-less what I want:

Your help will be greatly appreciated! Thanks, Nat

EDIT 12/22/18: Starting with the information from @Cristian below, I modified the example. I needed display: inline-block in addition to width: 100%. Unfortunately, at larger screen sizes, the "brand" is now mis-aligned with the menu items:

Any other fixes appreciated! I have posted this as a fresh question, so answers can go there (and points for accepted answer!)

解决方案

Maybe it's 1 year late but I had the same problem and couldn't find an answer. I found out that inline css doesn't work for me, so I had to define a custom class which is used for styling.

The solution to your problem would be styling the navbar-brand or any other element by using text-align: center however, this will not work unless you also specify width: 100%. Please access the link I provided to see my approach to the problem.

THIS IS AN EDIT AFTER OP'S LAST EDIT:

I found two approaches to do what you want to achieve. One is not very responsive and I don't recommend.

First approach:

Delete everything in CSS and leave just

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

Second approach:

Delete everything in css and, instead you will be using the layout grid offered by React Bootstrap. Now your code in Index.js will be looking something like that:

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"));

There is a problem however. I recommend you to study W3C (World Wide Web consortium) and understand why it's not recommended to place Logo in the middle of the screen. If you look on most websites (Stackoverflow, Amazon, eBay, the list goes on), they don't use the logo in the middle, and instead on the left. It's a standard so that's why there is no much recommendation for that. I do not recommend to use the solution I offered unless that's exactly your only way to accomplish what you want to achieve.

这篇关于如何在 react-bootstrap 中居中导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！