请原谅，如果这是一个新手问题，或者只是不正确的问题类型。我正处于学习如何编程的开始阶段，我的第一个任务之一是让我的注释编辑器工作。
我使用bootstrap来创建列;即，右边的列（sceen的十二分之一）包含不同的颜色，另一个第11/12列包含整个注释编辑器（图片等）。这一切都运作良好，除了我的右栏不起作用或出现的事实。
我想我很确定我关闭了前11个部分的列，但尝试用1列创建另一个div根本不起作用;因此，我不能把任何东西放在里面，也不能把我的颜色放在那里。
HTML语法如下所示：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="2048_MMA/style/bootstrap.min.css" type ="text/css">
<link rel="stylesheet" href="css/clouds.css" type="text/css">
<link rel="stylesheet" href="css/background.css" type="text/css">
<link rel="stylesheet" type="text/css" href="css/dropdownmenu.css"/>
<style>
body{
background: #c9dbe9;
background: -webkit-linear-gradient(top, #c9dbe9 0%, #fff 100%);
background: -linear-gradient(top, #c9dbe9 0%, #fff 100%);
background: -moz-linear-gradient(top, #c9dbe9 0%, #fff 100%);
padding-bottom: 500px;
}
iframe {
height: 670px;
width: 1200px;
margin-left:25%;
}
</style>
</head>
<body onload="init()">
<nav class="nav">
<ul>
<li>
<a href="portfolio_index.html">Home</a>
</li>
<li>
<a href="#">Applications</a>
<ul>
<li><a href="mediaviewer.html">Mediaviewer</a></li>
<li><a href="annotation editor.html">Annotation editor</a></li>
<li><a href="2048_MMA/portfolio_2048_water.html">2048</a></li>
</ul>
</li>
<li>
<a href="#">Essays</a>
<ul>
<li><a href="#">Essay Lea</a></li>
<li><a href="#">Essay Jonathan</a></li>
<li><a href="#">Essay Jelmer</a></li>
</ul>
</li>
</ul>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-md-11">
<script type="text/javascript">
var canvas, ctx, flag = false,
prevX = 0,
currX = 0,
prevY = 0,
currY = 0,
dot_flag = false;
var x = "black",
y = 2;
function init() {
canvas = document.getElementById('can');
ctx = canvas.getContext("2d");
w = canvas.width;
h = canvas.height;
canvas.addEventListener("mousemove", function(e) {
findxy('move', e)
}, false);
canvas.addEventListener("mousedown", function(e) {
findxy('down', e)
}, false);
canvas.addEventListener("mouseup", function(e) {
findxy('up', e)
}, false);
canvas.addEventListener("mouseout", function(e) {
findxy('out', e)
}, false);
}
function color(obj) {
switch (obj.id) {
case "green":
x = "green";
break;
case "blue":
x = "blue";
break;
case "red":
x = "red";
break;
case "yellow":
x = "yellow";
break;
case "orange":
x = "orange";
break;
case "black":
x = "black";
break;
case "purple":
x = "purple";
break;
case "grey":
x = "grey";
break;
}
if (x == "white")
y = 14;
else
y = 2;
}
function draw() {
ctx.beginPath();
ctx.moveTo(prevX, prevY);
ctx.lineTo(currX, currY);
ctx.strokeStyle = x;
ctx.lineWidth = y;
ctx.stroke();
ctx.closePath();
}
function erase() {
var m = confirm("Verwijder je kunstwerk?");
if (m) {
ctx.clearRect(0, 0, w, h);
document.getElementById("canvasimg").style.display = "none";
}
}
function findxy(res, e) {
if (res == 'down') {
prevX = currX;
prevY = currY;
currX = e.clientX - canvas.offsetLeft;
currY = e.clientY - canvas.offsetTop;
flag = true;
dot_flag = true;
if (dot_flag) {
ctx.beginPath();
ctx.fillStyle = x;
ctx.fillRect(currX, currY, 2, 2);
ctx.closePath();
dot_flag = false;
}
}
if (res == 'up' || res == "out") {
flag = false;
}
if (res == 'move') {
if (flag) {
prevX = currX;
prevY = currY;
currX = e.clientX - canvas.offsetLeft;
currY = e.clientY - canvas.offsetTop;
draw();
}
}
}
</script>
<iframe src="mediaviewer2.html"></iframe>
<canvas id="can" width="1080%" height="610%" style="position:absolute;top:0.5%;left:29%;border:5px solid;"></canvas>
<img id="canvasimg" style="position:absolute;top:30%;left:54%;">
<input type="button" value="Reset" id="clr" size="23" onclick="erase()" style="position:absolute;top:15%;left:55%;height:40px;width:50px;">
</div> <!--end column--->
<div class="col-md-1">
<div style="position:absolute;top:%;left:50%;">Kies een kleurtje!</div>
<div style="position:absolute;top:15%;left:50%;width:15px;height:15px;background:green;" id="green" onclick="color(this)"></div>
<div style="position:absolute;top:15%;left:51%;width:15px;height:15px;background:blue;" id="blue" onclick="color(this)"></div>
<div style="position:absolute;top:15%;left:52%;width:15px;height:15px;background:red;" id="red" onclick="color(this)"></div>
<div style="position:absolute;top:20%;left:50%;width:15px;height:15px;background:yellow;" id="yellow" onclick="color(this)"></div>
<div style="position:absolute;top:20%;left:51%;width:15px;height:15px;background:orange;" id="orange" onclick="color(this)"></div>
<div style="position:absolute;top:20%;left:52%;width:15px;height:15px;background:black;" id="black" onclick="color(this)"></div>
<div style="position:absolute;top:20%;left:53%;width:15px;height:15px;background:purple;" id="purple" onclick="color(this)"></div>
<div style="position:absolute;top:15%;left:53%;width:15px;height:15px;background:grey;" id="grey" onclick="color(this)"></div>
</div>
<div id="clouds">
<div class="cloud x1"></div>
<div class="cloud x2"></div>
<div class="cloud x3"></div>
<div class="cloud x4"></div>
<div class="cloud x5"></div>
<div class="cloud x6"></div>
<div class="cloud x7"></div>
<div class="cloud x8"></div>
<div class="cloud x9"></div>
<div class="cloud x10"></div>
<div class="cloud x11"></div>
</div> <!--end clouds-->
</div><!--end row-->
</div><!--end container-->
</body>
这张照片描绘了我的意思。你能发现HTML标记本身的任何错误吗？ http://imgur.com/qKBroc9
答案 0 :(得分：0)
我看到了几个潜在的问题。
一个是你的iframe宽度为1200px，高度为670px。这没有回应。因此，在较小的视口上，您将无法看到整个内容，它将突破列。令人高兴的是，Bootstrap提供了一些很好的功能来使您的iframe响应。为此，您需要使用Bootstrap Responsive Embed类。这样就形成了一个容器，其内在比例为4：3或16：9。基本上这意味着iframe与这两个比率中的一个成比例，并使您不必指定固定值。应用的标记如下所示：
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="…"></iframe>
</div>
现在，您还可以将canvas元素的宽度和高度设置为100％，并将top / left / bottom / right属性设置为0，这样它将填充与iframe相同的空间，而不管其大小如何视口。
第二个问题是您已将col-md-1 div中的所有内容设置为绝对定位，并且您使用％作为顶部和左侧值。这不起作用，因为没有内容的div的高度为0.因此，除非你给col-md-1一个固定的高度值，否则你只能将内容定位为0 （并且0的50％仍为0）。为柱子提供固定的高度当然是一种选择，但同样它也不是非常敏感。这里更好的选择是为顶部和左侧属性使用固定值。毕竟，您正在定位具有固定大小的元素，因此只要您为每个元素提供至少15px的空间，它们就没有问题。
到目前为止，最好的选择是不对这些元素使用绝对定位，只需将元素放在文档流中即可。你甚至可以使用类似于Bootstrap的响应式嵌入中使用的css技巧来创建一个具有比例高度和宽度的元素，然后按照整体设计进行缩放。您可以在演示中看到，无论视口的大小如何，颜色块都会随之缩放。
我还调整了演示，使用传统的内置Bootstrap功能进行按钮，导航和下拉。学习使用框架提供的内容肯定有助于节省开发，测试和维护的时间和精力。