легенда реактивного набора не квадратное шоу - PullRequest
Новая
       15

легенда реактивного набора не квадратное шоу

0 голосов
/ 25 мая 2018

Я хотел бы использовать BootStrap4 с моим Reactjs.После установки css of 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 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>
)

}

Обновление:
оригинал без начальной загрузки without bootstrap

новый с начальной загрузкой

with bootstrap

Update2:
Попробуйте создать свой собственный класс в my-fieldset
<fieldset className='my-fieldset'> И поместите это в css

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

Но легенда торчит слева

Вопрос:
Можно ли вернуть квадратную рамку fieldset назад и все же получить выгоду от начальной загрузки?

1 Ответ

0 голосов
/ 25 мая 2018

Через 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;
}
...