0

我想在 React Bootstrap 的导航栏中显示搜索图标和搜索栏

src/modules/home/Home.jsx

import React, { Component } from 'react'
import InformationTableView from '../../components/InformationTableView'
import { CustomButton } from '../../components/CustomButton'
import {Navbar } from 'react-bootstrap'
import { Form, Button, FormGroup, FormControl, ControlLabel ,InputGroup} from "react-bootstrap";
import ReactBootstrap, {Jumbotron, Col, Grid, Panel,NavDropdown} from 'react-bootstrap'
import { MDBCol, MDBIcon } from "mdbreact";
import 'mdbreact/dist/css/mdb.css'

class Home extends Component {
    render() {
        return (
            <div>

                <Navbar className="bg-light justify-content-between">
                    <Form inline>
                        <MDBCol md="6">
                            <form className="form-inline mt-4 mb-4">
                                <MDBIcon fab icon="search" />
                                <input className="form-control form-control-sm ml-3 w-75" type="text" placeholder="Account Number" aria-label="Search" />
                            </form>
                        </MDBCol>
                        <InputGroup>
                    </Form>
                </Navbar>

            </div>
        )
    }
}

export default Home

这个代码段有错误吗？

4

1 回答 1

1

嗨，您错过了根文件中的 Fontawesome 样式表，将此链接添加到您的 Html 根文件

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
于 2019-11-04T05:01:26.267 回答