twitter-bootstrap - innerHTML 不适用于 Bootstrap 4.21
问题描述
我需要显示 4 列,发现它只有在页面中写入完整的 HTML 时才有效,但在使用 innerHTML 时它不能正常工作。我制作了 2 个样本,这是一个可以正常工作的样本:
<div class="padding">
<div class="row-col">
<div class="row m-b">
<div class="col-md-3">
<a href="javascript:void(0);" onclick="#">
<div class="box">
<div class="box-header blue-grey-50">
<h3>Box Header1</h3>
</div>
<div class="box-body">
<p class="m-a-0">Lorem ipsum</p>
</div>
</div>
</a>
</div>
<div class="col-md-3">
<a href="javascript:void(0);" onclick="#">
<div class="box">
<div class="box-header blue-grey-50">
<h3>Box Header2</h3>
</div>
<div class="box-body">
<p class="m-a-0">Lorem ipsum</p>
</div>
</div>
</a>
</div>
<div class="col-md-3">
<a href="javascript:void(0);" onclick="#">
<div class="box">
<div class="box-header orange-300">
<h3>Box Header3</h3>
</div>
<div class="box-body">
<p class="m-a-0">Lorem ipsum</p>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
这个是一样的,但使用的是innerHTML:
<div class="padding">
<div class="row-col">
<div class="row m-b">
<div id="data_div"</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(data){
var data = ''+
'<div class="col-md-3">'+
' <a href="javascript:void(0);" onclick="#">'+
' <div class="box">'+
' <div class="box-header blue-grey-50">'+
' <h3>Box Header1</h3>'+
' </div>'+
' <div class="box-body">'+
' <p class="m-a-0">Lorem ipsum</p>'+
' </div>'+
' </div>'+
' </a> '+
'</div>'+
'<div class="col-md-3">'+
' <a href="javascript:void(0);" onclick="#">'+
' <div class="box">'+
' <div class="box-header blue-grey-50">'+
' <h3>Box Header2</h3>'+
' </div>'+
' <div class="box-body">'+
' <p class="m-a-0">Lorem ipsum</p>'+
' </div>'+
' </div>'+
' </a>'+
'</div>'+
'<div class="col-md-3">'+
' <a href="javascript:void(0);" onclick="#">'+
' <div class="box">'+
' <div class="box-header orange-300">'+
' <h3>Box Header3</h3>'+
' </div>'+
' <div class="box-body">'+
' <p class="m-a-0">Lorem ipsum</p>'+
' </div>'+
' </div>'+
' </a>'+
'</div>';
document.getElementById('data_div').innerHTML = data;
});
第二个不显示 4 列,问题是 - 为什么不呢?
谢谢你。
解决方案
首先有一个错误<div id="data_div"</div>
标签没有关闭。此外,这是一个子 div .row m-b
。删除该 div 并将 ID 放在父级中。
这是因为.col-md-3
需要成为.row
添加<div id="data_div"></div>
的孩子成为的孩子,.row
并且 this ( #data_div
) 中的所有内容都不是一行。
请参阅下面的代码id="data_div"
:
https ://codepen.io/StudioKonKon/pen/jXpbPL
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>test NOT OK</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimal-ui" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.css" type="text/css" />
</head>
<body>
<div>
<div class="padding">
<div class="row-col">
<div class="row m-b" id="data_div">
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript">
$(document).ready(function(data){
var data = ''+
'<div class="col-md-3">'+
' <a href="javascript:void(0);" onclick="#">'+
' <div class="box">'+
' <div class="box-header blue-grey-50">'+
' <h3>Box Header1</h3>'+
' </div>'+
' <div class="box-body">'+
' <p class="m-a-0">Lorem ipsum</p>'+
' </div>'+
' </div>'+
' </a> '+
'</div>'+
'<div class="col-md-3">'+
' <a href="javascript:void(0);" onclick="#">'+
' <div class="box">'+
' <div class="box-header blue-grey-50">'+
' <h3>Box Header2</h3>'+
' </div>'+
' <div class="box-body">'+
' <p class="m-a-0">Lorem ipsum</p>'+
' </div>'+
' </div>'+
' </a>'+
'</div>'+
'<div class="col-md-3">'+
' <a href="javascript:void(0);" onclick="#">'+
' <div class="box">'+
' <div class="box-header orange-300">'+
' <h3>Box Header3</h3>'+
' </div>'+
' <div class="box-body">'+
' <p class="m-a-0">Lorem ipsum</p>'+
' </div>'+
' </div>'+
' </a>'+
'</div>';
document.getElementById('data_div').innerHTML = data;
});
</script>
</body>
</html>
推荐阅读
- git - 尝试使用 SmartGit 提交时出现“bundle: command not found”。如何在 SmartGit 中更新我的包路径?
- python - CEFpython浏览器在windows上加载空白页,但在mac上完美运行
- python - Python:按条件过滤列表到新列表中
- typescript - 类与接口来描述对象
- c# - 为什么其中一个 navmesh 代理没有移动到下一个航路点?
- c# - 从 IIS 调用相同的 HttpWebRequest 会导致 IIS Express 中的证书错误吗?
- java - 使用retrofit2时如何解决“连接失败”错误?
- github - 如何通过 github api 知道 git pull 请求是否被批准
- git - 是否有使 Robohelp 2019 与 Windows 10 ssh-agent 一起使用的解决方法?
- javascript - 随机歌曲循环不适用于功能