Question

我正在学习Bootstrap，我试图用Boostrap 4进行偏移但是在尝试了一个小时后没有任何工作，这是我的HTML：

＆＃13;

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

＆＃13;

我试图用 col-md-offset-4 替换 offset-md-4 ，但仍无效。有人可以解决这个问题吗？

Answer 1

您没有指定使用哪个Bootstrap版本，但是从那个Popper JS包含，我猜测Bootstrap 4（测试版）。

用于列的Bootstrap 4（beta）does not have offset classes：

随着在v4中转向flexbox，我们不再拥有v3的偏移类风格。相反，使用像.mr-auto这样的保证金实用程序来强制兄弟列彼此远离。

Alpha version had offset classes though，但我建议您切换到测试版，因为每个版本都会以此为基础。

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

＆＃13;

.row {
    background: red;
}

.row > div {
    background: yellow;
}

＆＃13;

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

＆＃13;

如果您想坚持使用alpha版本，如果您包含Bootstrap 4 alpha CSS，则上述代码应该有效：

＆＃13;

.row {
    background: red;
}

.row > div {
    background: yellow;
}

＆＃13;

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

＆＃13;

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

Answer 2

首先检查bootstrap版本。这可能会对您有所帮助。 https://github.com/twbs/bootstrap/issues/19966

bootstrap 4无法获得偏移col工作

2 个答案: