Question

我想要在应用程序中有一个固定的标题，其中应用程序名称为左，菜单选项为“ Right”，在中间进行搜索（完全类似于StackOverflow标头）。

我把所有东西都对准了左边。我尝试了pullRight，pull-Right，float-right，但没有任何效果：

import React from 'react';
import { Button ,Navbar, Nav, NavDropdown, Form, FormControl} from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.css';

export default class Header extends React.Component {

    style = {
        backgroundColor : '#656D78',
        color: '#656D78',
        height: '50px',
        width: '100%'
    };

    brandStyle = {
        backgroundColor : '#FFCE54',
        height: '100%',
        width: '103px',
        textAlign: 'center',
        color: '#656D78',
        fontWeight: '800',
        fontSize: '30px',
        borderBottom: '2px solid #656D78',
        padding: '9px',
        float : 'left'
    }
    formStyle = {
        float : 'right'
    };
  render(){
    return(
            <Navbar expand="lg"  style = {this.style} >
                    <Navbar.Brand href="#home"  style={this.brandStyle}>MYAPP</Navbar.Brand>
                    <Form inline className="float-right" style={this.formStyle}>
                        <FormControl type="text" placeholder="Search" className="mr-sm-2 formStyle" />
                        <Nav.Link href="#home" >Hi, Rag</Nav.Link>
                    </Form>
            </Navbar>
    );
  }

}

Answer 1

内部表单使用类 ml-auto 将导航标签移到右侧

React Bootstrap Navbar不会右对齐

1 个答案: