reactjs - Reactstrap Fieldset 图例不是方形显示

Question

我想使用BootStrap4和我的Reactjs 。安装后，css为btn btn-primay工作正常。但是，我注意到 fieldset 的那个正方形离开了。我已经检查过demo

为了重复我的案例，这里是我的片段。

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 使成为(){ 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>
)

}

更新:
没有 Bootstrap 的原始

带有 Bootstrap 的新

更新2:
尝试在 my-fieldset 创建我自己的类(class)
<fieldset className='my-fieldset'> 并将其放入 css

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

但是图例粘在左边

问题:
可以带fieldset的方框吗返回并仍能受益于 Bootstrap ？

Answer 1

经过 2 小时(包括发布我的问题之前)在互联网上搜索，我刚刚找到了 2 行代码来回答我的问题

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

CSS

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

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