Question

请参阅代码。在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使用的图像高度容器。就像，目前，动画在全屏幕中工作正常，但在调整大小的窗口中没有。如何最好地实现这一目标？

这是我的代码：

＆＃13;

<!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> &nbsp Test1</a></li>
          <li><a href="#"><i class="fa fa-question-circle" aria-hidden="true"></i> &nbsp Test2</a></li>
          <li><a href="#"><i class="fa fa-briefcase" aria-hidden="true"></i> &nbsp Test3</a></li>
          <li><a href="#"><i class="fa fa-users" aria-hidden="true"></i> &nbsp Test4</a></li>
          <li><a href="#"><i class="fa fa-address-book" aria-hidden="true"></i> &nbsp Test5</a></li>
        </ul>
      </div>
    </div>
</body>

</html>

＆＃13;

编辑：添加了我想要实现的外观的图像。我想用现在的动画长时间看这个。

Answer 1

当你在一个对象上添加position：absolute时，你会完全脱离正常的DOM流。因此，您放置的任何内容都会进行调整，就像绝对定位的元素不存在一样，只需回流填充间隙即可。

要解决这个问题，你不应该把abs pos放在网格元素上。

绝对应该应用于网格的内容，而不是网格本身。这样可以防止您的问题发生。

因此，只需将您需要的任何内容保留在网格内的位置，然后将定位应用于这些元素。页面的其余部分将按预期流动。

或者，如果您在子项上设置父项的position：relative和position：absolute，则可以相对于父项移动子项，而不会影响DOM的其余部分。

使用position：绝对更改放置在bootstrap中下一列中的元素

1 个答案: