React Bootstrap 编辑字段不遵守 col-N className

Question

我正在尝试使用水平放置的 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 列宽度以及如何使标签与编辑字段在一行中？

Answer 1

您不能那样嵌套列。列必须是一行的直接子项。因此，如果您希望 label/input 成为其 col-4 容器的一半，请在容器内创建另一行并将它们都设为 col-6。即而不是这个：

<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 Bootstrap 编辑字段不遵守 col-N className

React Boostrap edit fields does not respect col-N className

reactjs

react-bootstrap

bootstrap-4