反应引导导航栏1

Posted 2023-02-22

【中文标题】反应引导导航栏1

【英文标题】：React bootstrap navbar1

【发布时间】：2020-12-20 12:51:19

【问题描述】：

我是 react 新手，我正在使用 React 引导程序作为模板。我专门使用 react 的导航栏组件。我试图将文本居中。然而它是这样来的：

这是相同的代码：

import React,Components from 'react';
import Navbar from 'react-bootstrap/Navbar'
export class NavbarTop extends React.Component
    render()
        return(
            <div>
            <Navbar bg="dark" variant="dark">
    <Navbar.Brand href="#home">
      <img
        
        src="../img/TataLogo.png"
        
        
        className="d-inline-block align-top"
      />' '
      
    </Navbar.Brand>
    <Navbar.Brand href="#home">
    Best Practices Management System
    </Navbar.Brand>
  </Navbar>
  </div>
  );



export default NavbarTop;

请帮助我。我使用了样式对齐中心，但它不起作用

我想以最佳实践管理系统为中心

【参考方案1】：

你可以使用m-auto，它是bootstrap提供的一个类，这将使标题水平居中

见sn-p

    return (
      <div>
        <Navbar bg="dark" variant="dark">
          <Navbar.Brand href="#home">
          <img
            
            src="../img/TataLogo.png"
            
            
            className="d-inline-block align-top"
          />' '

        </Navbar.Brand>
        <Navbar.Brand href="#home" className="m-auto">
            Best Practices Management System
        </Navbar.Brand>
      </Navbar>
    </div>
  );

【讨论】：

是的，虽然我想把标志移到一边

【参考方案2】：

将 CSS 类“text-center”添加到周围的 div 或 Navbar.Brand。

https://getbootstrap.com/docs/4.0/utilities/text/