引导4不能得到抵消山坳工作

问题描述：

我学习引导，我试图与自举4，但在尝试了小时，没有工作后偏移，这里是我的html：引导4不能得到抵消山坳工作

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
     <meta charset="UTF-8"> 
 
\t \t <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
\t \t <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
\t \t 
 
     <title>Hellow World!</title> 
 
\t \t <link rel="stylesheet" href="css/bootstrap.css"> 
 
\t \t <!--[if lt IE 9]> 
 
\t  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> 
 
\t  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
 
\t  <![endif]--> 
 
</head> 
 
<body> 
 
\t <div class="container"> 
 
\t   <div class="row"> 
 
\t \t \t \t <header class="col-md-12">HEADER</header> 
 
\t \t \t </div> 
 
\t \t \t <div class="row"> 
 
\t \t \t \t <div class="col-md-4 offset-md-4">1/3</div> 
 
\t \t \t \t <div class="col-md-4">1/3</div> 
 
\t \t \t </div> 
 
\t </div> 
 

 
\t <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script> 
 
\t <script src="js/jquery.min.js"></script> 
 
    <script src="js/bootstrap.min.js"></script> 
 
</body> 
 
</html>

我试图取代抵消-MD-4与COL-MD-偏移4，但还是不行。有人可以弄清楚这一点吗？

你确定你包含有效的引导版本吗？ – Garfield

答

首先你检查bootstrap version.this可能会帮助你。 https://github.com/twbs/bootstrap/issues/19966

答

您没有指定您使用的Bootstrap版本，但从该Popper JS包括，我猜Bootstrap 4（测试版）。

引导4（测试版）does not have offset classes为列：

随着向Flexbox的V4中，我们不再有偏移类V3的风格。而是使用像.mr-auto这样的保证金工具来强制兄弟列彼此远离。

Alpha version had offset classes though，但我鼓励你切换到测试版，因为每一个更进一步的版本将建立在此基础上。

在Bootstrap 4中，您可以通过向列添加margin utility classes来实现列偏移。例如：

.row { 
 
    background: red; 
 
} 
 

 
.row > div { 
 
    background: yellow; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-4 ml-auto">1/3</div> 
 
    <div class="col-md-4">1/3</div> 
 
    </div> 
 
</div>

如果你想坚持的alpha版本，你上面的代码应该工作，如果你包括引导4阿尔法CSS：

.row { 
 
    background: red; 
 
} 
 

 
.row > div { 
 
    background: yellow; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-4 offset-md-4">1/3</div> 
 
    <div class="col-md-4">1/3</div> 
 
    </div> 
 
</div>

更新：Bootstrap 4 beta 2带回这些offset classes！所以如果你包含新的CSS，你可以使用你的原始代码。

我更新了我的帖子，因为Bootstrap 4 beta 2刚刚发布，它带回了偏移类。 – juzraai

引导4不能得到抵消山坳工作

相关推荐