请引用代码。在 bootstrap 中编码时，我故意将一个元素放在 col-xs-4 处，其中 col-xs-offset-8 和另一个元素位于 col-xs-2 处；这意味着具有 col-xs-2 的元素被推到下一行。这很好用。但是，在我对 col-xs-4 col-xs-offset-8 元素使用绝对定位后，后续元素也被置换了。如何避免下一个元素被置换？
此外，为了实现响应式设计，我不想在 cubespinner 类上使用高度和宽度属性，而是使用 col-xs-4 容器要使用的完整水平空间和图像高度。就像，目前，动画在全屏下运行良好，但在调整大小的窗口中运行不佳。如何最好地实现这一目标？
这是我的代码:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=0.5">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<title>Test</title>
</head>
<body>
<style>
html,
body {
height: 100%;
}
body {
background-color: #111;
}
.navibar {
margin-top: 0px;
font-size: 18px;
}
.cubespinner {
-webkit-animation: spincube 10s alternate infinite;
animation: spincube 10s alternate infinite;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 53px 53px 0;
-moz-transform-origin: 53px 53px 0;
-ms-transform-origin: 53px 53px 0;
transform-origin: 53px 53px 0;
}
.cubespinner div {
position: absolute;
width: 440px;
height: 100px;
margin-top: 3px;
font-family: 'Baloo Paaji', cursive;
text-align: center;
color: #ddd;
text-decoration: underline;
border: 1px solid #888;
background: rgba(75, 105, 105, 0.8);
box-shadow: inset 0 0 20px rgba(250, 250, 250, 0.5);
-webkit-backface-visibility: hidden;
}
.cubespinner a:link {
color: #ddd;
text-decoration-color: #ddd;
}
.cubespinner a:visited,
.cubespinner a:hover,
.cubespinner a:active {
color: #5bc0de;
text-decoration-color: #5bc0de;
}
.face1 {
-webkit-transform: rotateX(0deg) translateZ(50px);
-moz-transform: rotateX(0deg) translateZ(50px);
-ms-transform: rotateX(0deg) translateZ(50px);
transform: rotateX(0deg) translateZ(50px);
}
.face2 {
-webkit-transform: rotateX(90deg) translateZ(50px);
-moz-transform: rotateX(90deg) translateZ(50px);
-ms-transform: rotateX(90deg) translateZ(50px);
transform: rotateX(90deg) translateZ(50px);
}
.face3 {
-webkit-transform: rotateX(180deg) translateZ(50px);
-moz-transform: rotateX(180deg) translateZ(50px);
-ms-transform: rotateX(180deg) translateZ(50px);
transform: rotateX(180deg) translateZ(50px);
}
.face4 {
-webkit-transform: rotateX(270deg) translateZ(50px);
-moz-transform: rotateX(270deg) translateZ(50px);
-ms-transform: rotateX(270deg) translateZ(50px);
transform: rotateX(270deg) translateZ(50px);
}
@-webkit-keyframes spincube {
0%,
100% {
-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
25% {
-webkit-transform: rotateX(-90deg);
}
50% {
-webkit-transform: rotateX(-180deg);
}
75% {
-webkit-transform: rotateX(-270deg);
}
}
@keyframes spincube {
0%,
100% {
-moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
-ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
25% {
-moz-transform: rotateX(-90deg);
-ms-transform: rotateX(-90deg);
transform: rotateX(-90deg);
}
50% {
-moz-transform: rotateX(-180deg);
-ms-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
75% {
-moz-transform: rotateX(-270deg);
-ms-transform: rotateX(-270deg);
transform: rotateX(-270deg);
}
}
</style>
<div class="container-fluid">
<div class="row">
<div class="col-xs-4 col-xs-offset-8">
<div class="cubespinner">
<div class="face1">
<a href="#" target="_blank"><img class="img-responsive" src="images/nitt.png" alt="logo"></a>
</div>
<div class="face2">
<a href="#" target="_blank">
<h2 class="text">Text for Test Purposes</h2>
</a>
</div>
<div class="face3">
<a href="#" target="_blank"><img class="img-responsive" src="images/nitt.png" alt="logo"></a>
</div>
<div class="face4">
<a href="#" target="_blank">
<h2 class="text">Text for Test Purposes</h2>
</a>
</div>
</div>
</div>
<div class="col-xs-4 col-md-2">
<ul class="nav nav-pills nav-stacked navibar">
<li class="active"><a href="#"><i class="fa fa-home" aria-hidden="true"></i>   Test1</a></li>
<li><a href="#"><i class="fa fa-question-circle" aria-hidden="true"></i>   Test2</a></li>
<li><a href="#"><i class="fa fa-briefcase" aria-hidden="true"></i>   Test3</a></li>
<li><a href="#"><i class="fa fa-users" aria-hidden="true"></i>   Test4</a></li>
<li><a href="#"><i class="fa fa-address-book" aria-hidden="true"></i>   Test5</a></li>
</ul>
</div>
</div>
</body>
</html>编辑:添加了我想要实现的外观图像。我希望现在的动画看起来很长。 
最佳答案
当你在一个对象上添加 position:absolute 时，你将它完全脱离了正常的 DOM 流。因此，您放置在它之后的任何内容都会进行调整，就好像绝对定位的元素不存在一样，并简单地回流以填补空白。
要解决此问题，您永远不应将 abs pos 放在网格元素上。
Absolute 应该应用于网格的内容，而不是网格本身。这将防止您的问题发生。
因此，只需将您需要保留在网格内的任何位置，然后将定位应用到这些元素即可。页面的其余部分将正常流动。
或者，如果您设置 position:relative of the parent，并在子项上设置 position:absolute，您可以相对于父项移动子项而不影响 DOM 的其余部分。
关于html - 使用位置 :absolute changes elements placed in next columns in bootstrap，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46060790/