Question

我正在使用Bootstrap v4.1.2。我正在尝试使用col-md-6，但在我的计算机>1300px width上却没有在两列中显示。但是，如果我正在使用float:left有用但是否则，它仅显示在一个列中，而空白显示在另一列中（在使用container或container-fluid或不使用任何情况下）

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
       <div class="col-6">
          .....
       </div>
       <div class="col-6">
          .....
       </div>
    </div>
</div>

Answer 1

基于Bootstrap 4文档（https://getbootstrap.com/docs/4.0/layout/grid/），它应该看起来像这样：

<div class="container">
 <div class="row">
  <div class="col">
   1 of 2
  </div>
  <div class="col">
   2 of 2
  </div>
 </div>
</div>

Answer 2

使用Bootstrap 4.1.2 CSS的正确<link>是：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">

您是否检查了浏览器控制台？由于链接不正确，CSS可能会被阻止。

Answer 3

工作代码：

{
    "businessArea": [
        {
            "id": 1,
            "displayOrder": 10,
            "code": null,
            "description": "Lorem ipsum dolor sit amet",
            "isObsolete": false,
            "childName": "driver"  // copied
        },
        {
            "id": 2,
            "displayOrder": 20,
            "code": null,
            "description": "Lorem ipsum dolor sit amet",
            "isObsolete": false,
            "childName": "driver"  // copied
        },
        {
            "id": 3,
            "displayOrder": 30,
            "code": null,
            "description": "Lorem ipsum dolor sit amet",
            "isObsolete": false,
            "childName": "driver"  // copied
        }
    ],

Bootstrap列不起作用，但使用float可以起作用

3 个答案: