Question

col-md-offset-*的目的究竟是什么？

我知道col-md-12没有偏移的目的。但由于我不知道，我已经尝试过玩它但仍然没有。

Answer 1

使用.col-md-offset- *类向右移动列。这些类通过*列增加列的左边距。例如，.col-md-offset-2将.col-md-2移动到四列上。

＆＃13;

<!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>

＆＃13;

Answer 2

简短版本的答案。将带有自定义宽度的空列偏移到带有数据的列之前。如果要在包含数据的列之后创建具有自定义宽度的空列，请使用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>

Answer 3

.col-md-offset- *将特定数量的虚拟Bootstrap列留在任何列的左侧（有点像看不见的占位符）。

它用于从margin-left给出空间，你可以在我的例子中看到第一个div用于偏移，这就是为什么它从左边距显示

＆＃13;

<!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>

＆＃13;

Answer 4

用于向右移动列。有关详细信息，请访问http://getbootstrap.com/css/#grid-offsetting

Answer 5

所以col-md-12会占用整个前面的div。但是如果你不想占用整个div会发生什么呢？假设您只想占用div的一半，但是想要将内容居中，那么您可以做col-md-6 col-md-offset-3这将使6个cols宽的div并将其抵消3.因此内容开始3个cols然后去6个字母。
您应该阅读有关其网格系统及其工作原理的bootstrap文档。

Answer 6

col-md-offset- *从左边给出边距。就像我需要右边的col-md-6而不是左边那样我们需要添加＆＃34; col-md-offset-6＆＃34;与col-md-6。

实施例： <div class="row"> <div class="col-md-offset-6 col-md-6"></div> </div>

尝试在编辑器中添加此html并在浏览器中检查输出。

Answer 7

它用于从margin-left给出空间，你可以在我的例子中看到第一个div用于偏移，这就是为什么它从左边距显示

尝试调整浏览器或其他设备的大小，以查看：https://getbootstrap.com/examples/grid/

以下是大屏幕截图（col-lg-*已应用），在Inspect上查看

.col-md-offset-2在col-md-*中的row之间留出一个空格，请查看下方的图片。

以下是我在中等屏幕上的屏幕截图（col-md-*已应用），在Inspect上查看

希望得到这个帮助。

Answer 8

根据W3School：它类似于margin-left，但是以unit为col。您可以在那里try it yourself或read reference。

什么是col-md-offset- *的目的？

8 个答案: