Javascript reactjs中的引导导航栏不适合整个屏幕宽度

我不熟悉在reactjs框架中使用bootstrap进行引导。执行此代码时，导航栏不会在屏幕上显示全宽，我需要导航栏显示全宽

import React, { Component } from 'react';
import "bootstrap/dist/css/bootstrap.min.css";
//import { Link } from 'react-router-dom';

export default class ClientProfile extends Component {

    render(){
        return(
            <nav className="navbar navbar-light bg-light">          
                <a class="navbar-brand" href="#">
                    Nav
                </a>
                <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                    <li class="nav-item active">
                        <a class="nav-link" href="#"> How it Works </a>
                    </li>
                </ul>
            </nav> 
        )
    }
}

import React，{Component}来自'React'；
导入“bootstrap/dist/css/bootstrap.min.css”；
//从'react router dom'导入{Link}；
导出默认类ClientProfile扩展组件{
render（）{
返回(




)
}
}

您是否使用任何容器？将父组件发布到使用此组件的位置。您可以根据自己的需要自定义css。您是否仅使用

引导

或

反应引导

？能否提供一个工作演示？这里提供的信息不足以理解您的问题。