twitter-bootstrap Twitter 引导程序和画布定位
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15626952/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
twitter bootstrap and canvas positioning
提问by user1144596
i am trying to use twitter bootstrap in one of my projects and what i really want is a header with link and a HTML canvas in the middle of the page. Reference:
我正在尝试在我的一个项目中使用 twitter bootstrap，我真正想要的是页面中间带有链接的标题和 HTML 画布。参考：
When I add a html canvas tag and give it a width and height I get two undesirable effects:
当我添加一个 html canvas 标签并为其指定宽度和高度时，我会得到两个不良效果：
- the upper border of the canvas is cutoff and have to apply margin to the canvas
- the canvas is pushed to the right and again i have to apply margin to it.
- 画布的上边框被截断，必须对画布应用边距
- 画布被推到右边，我必须再次对其应用边距。
I'd like the canvas to stay at the center of the page.
我希望画布位于页面的中心。
回答by Mateo
In order to keep your canvas element in the center of the screen you will have to wrap it with a containing div as follows.
为了将您的画布元素保持在屏幕的中心，您必须使用包含的 div 将其包裹起来，如下所示。
<div>
<canvas></canvas>
</div>
We then need to create and apply a class that will give the containing div the same pixel width as the canvas inside.
然后我们需要创建并应用一个类，该类将为包含的 div 提供与里面的画布相同的像素宽度。
<style>
.container-canvas {
/* This could be done in one single declaration. See the extended sample. */
margin-right: auto;
margin-left: auto;
width: 800px;
}
</style>
<div class="container-canvas">
<canvas width="800" height="480"></canvas>
</div>
This will center your canvas and keep the canvas in the center as you resize your browser window. As for the nav bar overlaying your newly created canvas element you will need to add more styling to the main content container.
这将使您的画布居中，并在您调整浏览器窗口大小时将画布保持在中心。至于覆盖新创建的画布元素的导航栏，您需要向主内容容器添加更多样式。
<style>
.container-main {
margin-top: 75px;
}
</style>
<div class="container container-main">
<div class="container-canvas">
<canvas width="800" height="480"></canvas>
</div>
</div>
For the extended/complete sample see below:
有关扩展/完整示例，请参见下文：
<!doctype html>
<html>
<head>
<title>Bootstrap + Canvas</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">
<style>
.container-main {
margin-top: 75px;
}
.container-canvas {
margin: 0 auto;
width: 800px;
}
canvas {
border: 1px solid #333;
}
</style>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container container-main">
<div class="container-canvas">
<canvas id="mycanvas" width="800" height="480">
This is my fallback content.
</canvas>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
function draw() {
var canvas = document.getElementById("mycanvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect(10, 10, 55, 50);
ctx.fillStyle = "rgba(0,0,200,0.5)";
ctx.fillRect(30, 30, 55, 50);
} else {
alert("Canvas isn't supported.");
}
}
$(function() {
draw();
});
</script>
</body>
</html>
