Question

我想将BootStrap4与Reactjs一起使用。安装后，btn btn-primay的CSS工作正常。但是，我注意到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

带引导程序的新文件

UPDATE2：
尝试在my-fieldset中创建自己的课程 <fieldset className='my-fieldset'> 并把它放到css

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

但传说是坚持左边

问题：
是否可以将fieldset的方框带回来并仍然可以获得bootstrap的好处？

Answer 1

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

在fieldset和legend
legend使用margin和width
field-set使用border

css

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

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

reactstrap fieldset legend不是方形显示

1 个答案: