React Boostrap 编辑字段不尊重 col-N className

大佬教程收集整理的这篇文章主要介绍了React Boostrap 编辑字段不尊重 col-N className，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决React Boostrap 编辑字段不尊重 col-N className？

我正在尝试使用水平放置的 3 个标签编辑字段创建表单，所有 6 个组件 (label-edit-label-edit-label-edit) 应具有相等的宽度和等距。我的代码是这样的：

package.Json：

{
  "name": "react","version": "1.0.0","description": "React example starter project","keywords": ["react","starter"],"main": "src/index.Js","dependencIEs": {
    "react": "17.0.2","react-dom": "17.0.2","react-scripts": "4.0.0","jquery": "^3.3.1","bootstrap": "^4.1.3","popper.Js": "^1.14.3"
  },"devDependencIEs": {
    "@babel/runtime": "7.13.8","typescript": "4.1.3"
  },"scripts": {
    "start": "react-scripts start","build": "react-scripts build","test": "react-scripts test --env=Jsdom","eject": "react-scripts eject"
  },"browsersList": [">0.2%","not dead","not IE <= 11","not op_mini all"]
}

React 组件是：

import "./styles.CSS";
import bootstrap from "bootstrap"; // eslint-disable-line no-unused-vars
import "../node_modules/bootstrap/dist/CSS/bootstrap.min.CSS";

export default function App() {
  return (
    <div classname="App">
      <div classname="form">
        <div classname="row">
          <div classname="form-group col-4">
            <label for="gen_ref_num" classname="col-2 control-label">
              SerIE
            </label>
            <input
              type="text"
              classname="col-2 form-control"
              ID="gen_ref_num"
            />
          </div>
          <div classname="form-group col-4">
            <label for="gen_ref_serIE" classname="col-2 control-label">
              number
            </label>
            <input
              type="text"
              classname="col-2 form-control"
              ID="gen_ref_serIE"
            />
          </div>
          <div classname="form-group col-4">
            <label for="general_reference" classname="col-2 control-label">
              SerIE/number
            </label>
            <input
              type="text"
              classname="col-2 form-control"
              ID="general_reference"
            />
          </div>
        </div>
      </div>
    </div>
  );
}

（代码沙盒 https://codesandbox.io/s/musing-lehmAnn-mockr?file=/src/App.js）

但是我失败了。如何使编辑字段填充整个 2 列宽度以及如何使标签与编辑字段在一行中？

解决方法

<div className="form-group col-4">
  <label for="gen_ref_num" className="col-2 control-label">
    Serie
  </label>
  <input
    type="text"
    className="col-2 form-control"
    id="gen_ref_num"
  />
</div>

<div className="form-group col-4">
  <div className="row">
    <label for="gen_ref_num" className="col-6 control-label">
      Serie
    </label>
    <input
      type="text"
      className="col-6 form-control"
      id="gen_ref_num"
    />
  </div>
</div>

大佬总结

以上是大佬教程为你收集整理的React Boostrap 编辑字段不尊重 col-N className全部内容，希望文章能够帮你解决React Boostrap 编辑字段不尊重 col-N className所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。