col-md-offset-* 的具体用途是什么？
我知道col-md-12 没有偏移量的目的。但我不知道，我试过玩它，但还是没有。
【问题讨论】：
标签： html css twitter-bootstrap
使用 .col-md-offset-* 类将列向右移动。这些类将列的左边距增加 * 列。例如，.col-md-offset-2 将 .col-md-2 移动到四列。
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col-md-12">
<div class="col-md-2">First col-md-2</div>
<div class="col-md-2 col-md-offset-2"> col-md-2 with offset 2</div>
</div>
</body>
</html>【讨论】：
答案的简短版本。在我们的数据列之前偏移使具有自定义宽度的空列。如果您想在包含数据的列之后创建具有自定义宽度的空列，请使用 pull (col-md-pull-*)。
示例： 在中等大小的窗口中，我们要创建 2 个空单元格、7 个带内容的单元格和 3 个空单元格。我们可以这样做。
<div class="row">
<div class="col-md-offset-2 col-md-7 col-md-pull-3">OUR CONTENT</div>
</div>
这就是没有偏移的样子。我们应该创建具有自定义宽度的空 div。
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-7">OUR CONTENT</div>
<div class="col-md-3"></div>
</div>
【讨论】：
.col-md-offset-* 将特定数量的虚拟 Bootstrap 列留在任何列的左侧（有点像不可见的占位符）。
它用于从左边距留出空间，您可以在我的示例中看到第一个 div 与偏移量一起使用，这就是它从左边距显示的原因
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-xs-4 col-md-offset-2 col-xs-offset-2">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-md-4 col-xs-4">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>
</body>
</html>【讨论】：
它用于将列向右移动。详情请访问http://getbootstrap.com/css/#grid-offsetting
【讨论】：
所以col-md-12 将占据整个前面的 div。但是如果你不想占用整个 div 会发生什么？
假设您只想占据 div 的一半但想要将内容居中，那么您可以执行 col-md-6 col-md-offset-3 这将使 div 宽 6 列并将其偏移 3。因此内容从 3 列开始，然后进入 6 列列。
您真的应该阅读有关他们的网格系统及其工作原理的引导文档。
【讨论】：
col-md-offset-* 给左边距。就像如果我需要 col-md-6 在右侧但不在左侧，那么我们需要在 col-md-6 中添加“col-md-offset-6”。
示例：
<div class="row">
<div class="col-md-offset-6 col-md-6"></div>
</div>
尝试在编辑器中添加此 html 并在浏览器中检查输出。
【讨论】：
它用于从左边距留出空间，您可以在我的示例中看到第一个 div 与偏移量一起使用，这就是它从左边距显示的原因
尝试调整浏览器大小或在其他设备上查看：https://getbootstrap.com/examples/grid/
这是我在大屏幕上的截图（col-lg-* 已应用），请在Inspect 上查看
.col-md-offset-2 在row 中的两个col-md-* 之间留一个空格，查看下图。
这是我在中等屏幕上的屏幕截图（col-md-* 已应用），请在 Inspect 上查看
希望对您有所帮助。
【讨论】：
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col-md-12">
<div class="col-md-2">First col-md-2</div>
<div class="col-md-2 col-md-offset-2"> col-md-2 with offset 2</div>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-xs-4 col-md-offset-2 col-xs-offset-2">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-md-4 col-xs-4">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>
</body>
</html>【讨论】：
根据W3School：类似于margin-left，但单位为col。你可以在那里try it yourself或read reference。
【讨论】：