使用bootstrap顯示3列數據？數據顯示爲一行代替

爲什麼class="col"類不會導致數據顯示爲包含3列的行？使用bootstrap顯示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';

來源

2017-03-29 bobbyrne01

檢查輸出HTML，你會看到你所追加的每一行沒有創造一棵樹的標記。 – DaniP

嘗試創建一個'var'來存儲所有內容，然後將其存儲到生成的'div'中https://jsfiddle.net/b63g4kpe/2/ – DaniP

你的JS如其他人所說的不正常渲染。在下面的例子中，我已經展示了一種實現這一點的方法。在這裏我創建了divs，並將它們作爲一個接一個的兒童添加進去。

摘要示例

$(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>

來源

2017-03-30 00:59:38 neophyte

因爲語法（例如）col-md-4你也太早關閉您row股利。更新：事實上，它比這稍差，你的輸出將呈現爲：

<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>

來源

2017-03-29 16:15:25 mayersdesign

你忘了正確包括網格列。你寫了<div class="col">。你應該寫下類似col-lg-*或col-md-*或col-sm*內div標記。用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>

來源

2017-03-30 00:56:28

使用bootstrap顯示3列數據？數據顯示爲一行代替

回答

相關問題