reactstrap字段集图例不正方形显示

Question

我想在我的Reactjs使用BootStrap4 。 安装后， btn btn-primay css可以正常工作。 但是，我注意到该fieldset平方不见了。 我已经通过演示检查了

在这里重述一下我的片段。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import 'bootstrap/dist/css/bootstrap.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App/>, document.getElementById('root'));
registerServiceWorker();

package.json

{
  "name": "f1",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@amcharts/amcharts3-react": "^3.1.0",
    "ajv": "^6.5.0",
    "amcharts3": "^3.21.12",
    "axios": "^0.18.0",
    "bootstrap": "^4.1.1",
    "lodash": "^4.17.5",
    "react": "^16.4.0",
    "react-dom": "^16.4.0",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.2.2",
    "react-scripts": "1.1.1",
    "reactstrap": "^6.0.1",
    "recharts": "^1.0.0-beta.10",
    "redux": "^3.7.2",
    "redux-form": "^7.2.3",
    "redux-saga": "^0.16.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

login.js render（）{const {handleSubmit} = this.props;

return(
  <Fragment>
    <a href="/"><img src="tokamak-model.png"/></a>
    <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
    <fieldset>
      <legend>Authentication</legend>
      <table>
        <tr>
          <td>Username</td>
          <Field
            name="userid"
            component={this.renderField}
            placeholder="User ID"
            autocomplete="username"
            type="text"
          />
        </tr>
        <tr>
          <td>Password</td>
          <Field
            name="password"
            component={this.renderField}
            placeholder="Password"
            autocomplete="current-password"
            type="password"
          />
        </tr>
      </table>
      <button type="submit" className="btn btn-primary">Submit</button>

    </fieldset>
    </form>
  </Fragment>
)

}

更新：
原始无自举

带引导的新

更新2：
尽量使自己的类my-fieldset
<fieldset className='my-fieldset'>并将其放入css

.my-fieldset{
  border: 3px solid;
}

但是传说在左边

题：
是否有可能将fieldset方形框架放回原处并仍然获得引导的好处？

Answer 1

2小时后（包括在发布我的问题之前），通过Internet搜索，我发现有2行代码可以回答我的问题

1. 在fieldset和legend定义我自己的类
2. legend使用margin和width
3. field-set使用border

css

.login-legend{
  margin: 20px;
  width: 155px;
}

.my-fieldset{
  border: 3px solid;
}