具有Bootstrap的材质UI无法响应

Question

正在使用反应和材料开发一个应用程序ui也使用Bootstrap 4 .bootstrap是响应式的，但是材料ui组件没有根据引导程序宽度进行调整，即响应性因此应该使用bootstrap 4进行​​响应

从'material-ui / styles / MuiThemeProvider'导入MuiThemeProvider; 从'../ components / common / header / Header'导入标题;

class HomeView extends Component {
render() {
 return (
  <MuiThemeProvider>
    <div className="container-fluid NOPDNG text-center">
      <Header showLogo={false} showLogout={false} userInfo={userInfo} showTitle={true} />
      <section id="signUpContainer">
        <Paper zDepth={1} id="Paper">
          <div className='row bo-gutters'>
            <div className="col-sm-12 text-center">
              <h5 id="signUpTitle"> Sign Up </h5>
            </div>
            <div className="col-sm-12 text-left">
              <TextField
                hintText="Name"
                floatingLabelText="Name"

              />
            </div>
            <div className="col-sm-12 text-left">
              <TextField
                hintText="Email"
              />
            </div>
            <div className="col-sm-12 text-left">
              <TextField
                hintText="Password"
                floatingLabelText="Password"
              />
            </div>

            <div className="col-sm-12 text-left">
              <RadioButtonGroup name="shipSpeed" defaultSelected="not_light" onChange={this.onChangeRole.bind(this)}>

                <RadioButton
                  value="demo1"
                  label="demo1"
                />
                <RadioButton
                  value="demo2"
                  label="demo2"
                />

              </RadioButtonGroup>
            </div>
            <div className="col-sm-12 text-left">
              <TextField
                hintText="Mobile"

              />
            </div>

            <div className="col-sm-12 text-left">
              <section className="PDNG_TP_10PX">
                <RaisedButton label="Sign Up"
                  buttonStyle={{ background: "#ac4074" }}
                  secondary={true}
                  onClick={this.onClickSignUp}
                />
              </section>
            </div>
          </div>
        </Paper>
      </section>

    </div>
    <Footer />
  </MuiThemeProvider> )}
 }