twitter-bootstrap Bootstrap：如何在网格设计中的任何位置水平放置元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17079417/
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
Bootstrap: how to position an element horizontally anywhere in a grid design?
提问by curious1
I am learning Bootstrap. I am using Bootstrap for a design with fixed width. From the online documentation, I know it is easy to position elements starting from a column. For example:
我正在学习 Bootstrap。我正在使用 Bootstrap 进行固定宽度的设计。从在线文档中，我知道从一列开始定位元素很容易。例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap version</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="learn.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row">
<div class="span3" style="background-color:grey">span3</div>
<div class="span5" style="background-color:pink"><div id="text">span5 text</div></div>
<div class="span4" style="background-color:navy">span4</div>
</div>
</div>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.9.1.min.js"><\/script>')</script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
In the above,
在上面，
<div id="text">span5 text</div>
horizontally starts exactly where the fourth column starts. I would like to know how Bootstrap expert users use CSS to position
水平从第四列开始的地方开始。我想知道 Bootstrap 专家用户如何使用 CSS 来定位
<div id="text">span5 text</div>
to make it start between the third and fourth columns or ends between the eighth and ninth columns.
使其在第三和第四列之间开始或在第八和第九列之间结束。
I am thinking about using either:
我正在考虑使用：
<style>
#text {
margin-left:-10px;
}
</style>
or
或者
<style>
#text {
position:relative;
left:-10px;
}
</style>
to position the div, but not sure whether which is preferred and would like to know what experts do and some other ways.
定位 div，但不确定哪个是首选，想知道专家做什么以及其他一些方法。
Thanks!
谢谢！
采纳答案by Zim
By default, there is always a margin-left (or gutter) between the Bootstrap spans (see here: http://bootply.com/64463). If you want to override this, it is possible with CSS, but then you'll lose the responsive benefits of Bootstrap, because the element will be removed from the normal page flow.
默认情况下，Bootstrap 跨度之间总是有一个左边距（或装订线）（请参阅此处：http: //bootply.com/64463）。如果你想覆盖它，CSS 是可能的，但是你将失去 Bootstrap 的响应优势，因为元素将从正常的页面流中删除。
A better option may be a custom Bootstrap build with no gutter: http://twitter.github.io/bootstrap/customize.html#variables
更好的选择可能是没有装订线的自定义 Bootstrap 构建：http: //twitter.github.io/bootstrap/customize.html#variables
Or, you can create a custom CSS class that you apply to rows as needed like this Gutter-less example: http://bootply.com/61712
或者，您可以创建一个自定义 CSS 类，根据需要应用到行，就像这个 Gutter-less 示例一样：http: //bootply.com/61712
回答by Hossein Ganjyar
I use this solution, that working for me:
我使用这个对我有用的解决方案：
<div class="jumbotron" style="height:100%;">
<div>
<table style="height:100%;width:100%">
<thead>
<tr>
<td>
<div class="row">
<div class="col-md-6">
head 1
</div>
<div class="col-md-6">
head 2
</div>
</div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="row">
<div class="col-md-6">
body 1
</div>
<div class="col-md-6">
body 2
</div>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<div class="row">
<div class="col-md-6">
foot 1
</div>
<div class="col-md-6">
foot 2
</div>
</div>
</td>
</tr>
</tfoot>
</table>
</div>
