reactstrap 字段集图例不是方形显示答案

【问题标题】：reactstrap fieldset legend not square showreactstrap 字段集图例不是方形显示
【发布时间】：2019-06-13 23:19:49
【问题描述】：

我想将BootStrap4 与我的Reactjs 一起使用。安装后，btn btn-primay 的 css 工作正常。但是，我注意到fieldset 的正方形消失了。我已经检查过demo

在这里重复我的情况是我的 sn-ps。

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 使成为（）{ 常量 {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 的方形框架带回来，并且仍然可以从引导程序中受益？

【问题讨论】：

字段集的方框是什么意思？你想删除输入字段的边框半径吗？
@johnsam 我已经更新了我的问题。因为我不知道它的技术术语。我第一次可能会让你感到困惑。对不起。我现在正在寻找 class 和 css key: property 来调整它。

标签： reactjs bootstrap-4 reactstrap

【解决方案1】：

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

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

css

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

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

【讨论】：