ブートストラップを使用して3列のデータを表示していますか？データは代わりに行として表示されます

は、データが3つの列を含む行として表示されないのはなぜですか？ブートストラップを使用して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他の人が述べたように、正しくレンダリングされません。次の例でこれを実現する方法を示しました。ここで私は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>

出典

2017-03-30 00:59:38 neophyte

構文は、（例えば）であるため、col-md-4も、あなたはあまりにも早くあなたのrowのdivを閉じています。あなたは正しくGRID列を含めるのを忘れて

<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

：UPDATE：として実際には、それはそれよりもやや悪化します、あなたの出力をレンダリングします。あなたは<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

ブートストラップを使用して3列のデータを表示していますか？データは代わりに行として表示されます

答えて

関連する問題