Question

在下面的代码中，我期望嵌套在左侧第2列（A为3，B为3和C为3）中的3列看起来像“列”，而不是像行一样显示。我究竟做错了什么？谢谢。

代码文字：

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "@babel/cli": "^7.4.4",
    "@babel/core": "^7.4.4",
    "@babel/node": "^7.2.2",
    "@babel/preset-env": "^7.4.4",
    "@babel/register": "^7.4.4",
    "babel-jest": "^24.7.1",
    "chai": "^4.2.0",
    "enzyme": "^3.9.0",
    "expect": "^24.7.1",
    "jest": "^24.7.1",
    "jsdom": "^15.0.0",
    "mocha": "^6.1.4",
    "react-addons-test-utils": "^15.6.2",
    "react-scripts": "0.7.0"
  },
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-redux": "^7.0.2",
    "redux": "^4.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "jest",
    "test:watch": "npm test -- --watch",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Answer 1

您需要使用另一个.row来包装内部列。

https://www.codeply.com/go/c6fmh4Fypj

<div class="container">
    <div class="row">

        <div class="col-sm-3">
            q1 of 4
        </div>

        <div class="col-sm-3">
            <div class="row">
                <div class="col-2">
                    A of 3
                </div>

                <div class="col">
                    B of 3
                </div>
                <div class="col">
                    C of 3
                </div>
            </div>
        </div>

        <div class="col-sm-3">
            q3 of 3
        </div>
        <div class="col-sm-3">
            q4 of 4
        </div>
    </div>
</div>

问题在bootstrap4列中嵌套3列

1 个答案: