引導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，但還是不行。有人可以弄清楚這一點嗎？

來源

2017-09-13 vietphi

你確定你包含有效的引導版本嗎？ – Garfield

首先你檢查bootstrap version.this可能會幫助你。 https://github.com/twbs/bootstrap/issues/19966

來源

2017-09-13 12:07:05 sadakat

您沒有指定您使用的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，你可以使用你的原始代碼。

來源

2017-09-13 12:16:38 juzraai

我更新了我的帖子，因爲Bootstrap 4 beta 2剛剛發佈，它帶回了偏移類。 – juzraai

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

回答

相關問題