使用引导程序显示 3 列数据？数据显示为一行答案

【问题标题】：Displaying 3 columns of data using bootstrap? Data shows as a row instead使用引导程序显示 3 列数据？数据显示为一行
【发布时间】：2017-08-23 06:08:48
【问题描述】：

为什么class="col" 类不会导致数据显示为包含 3 列的行？

https://jsfiddle.net/bobbyrne01/b63g4kpe/1/

HTML：

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
<div id="results"></div>

Js：

document.getElementById('results').innerHTML += '<div class="container">';
document.getElementById('results').innerHTML += '<div class="row">';
for (var i = 0; i < 3; i++) {
  document.getElementById('results').innerHTML += '<div class="col">';
  document.getElementById('results').innerHTML += i + ' Col';
}
document.getElementById('results').innerHTML += '</div>';
document.getElementById('results').innerHTML += '</div><br/>';
document.getElementById('results').innerHTML += 'After container';

【问题讨论】：

检查输出 HTML，您将看到您正在附加每一行而不是创建树标记。
尝试创建一个var 来存储所有内容，然后再将其分配给结果divjsfiddle.net/b63g4kpe/2

标签： html css twitter-bootstrap grid

【解决方案1】：

您的 js 没有像其他人提到的那样正确呈现。我在下面的示例中展示了一种实现此目的的方法。在这里，我创建了 div 并将它们一个接一个地附加为子级。

示例片段

$(document).ready(function() {
  var res = document.getElementById('results');
  var con = document.createElement('div');
  con.className = 'container-fluid';
  var newdiv = document.createElement('div');
  newdiv.className = 'row';
  res.appendChild(con);
  con.appendChild(newdiv);

  for (var i = 0; i < 3; i++) {
    var con1 = document.createElement('div');
    con1.className = 'col-md-4 col-xs-4';
    newdiv.appendChild(con1);

    var text = document.createTextNode(i + ' Col');
    con1.appendChild(text);
  }
  document.getElementById('results').innerHTML += 'After container';
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div id="results">
</div>

【讨论】：

【解决方案2】：

因为语法是（例如）col-md-4，所以你也过早地关闭了row div。更新：事实上它比这更糟糕，你的输出呈现为：

<div id="results">
  <div class="container">
  </div>
  <div class="row"></div>
  <div class="col"></div>0 Col
  <div class="col"></div>1 Col
  <div class="col"></div>2 Col<br>
  After container
  </div>

【讨论】：

【解决方案3】：

您忘记正确包含 GRID 列。你写了<div class="col">。您应该在 div 标记内编写 col-lg-* 或 col-md-* 或 col-sm* 之类的类。将这些 * 替换为 1-12 中的数字。希望这能回答你的问题，我已经为你提供了下面的代码。

document.getElementById('results').innerHTML += '<div class="container">';
document.getElementById('results').innerHTML += '<div class="row">';
document.getElementById('results').innerHTML += '<div class="col-xs-12 col-lg-12">';
for (var i = 0; i < 3; i++) {
  document.getElementById('results').innerHTML += '<div class="col-xs-4 col-lg-4"> Column ' + (i + 1) + '</div>';
}
document.getElementById('results').innerHTML += '</div>';
document.getElementById('results').innerHTML += '</div>';
document.getElementById('results').innerHTML += '</div><br/>';
document.getElementById('results').innerHTML += 'After container';

<head>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<head>
<body>
   <div id="results"></div>
</body>

【讨论】：