0
コードを参照してください。ブートストラップでコーディングするとき、私は意図的にcol-xs-offset-8を持つcol-xs-4とcol-xs-2の別の要素を1つの行に配置しました。これは、col-xs-2を持つ要素が次の行にプッシュされることを意味します。これはうまく動作します。しかし、col-xs-4 col-xs-offset-8要素に絶対配置を使用した後は、後続の要素も置き換えられます。次の要素が避けられないようにするにはどうすればいいですか？位置の使用：ブートストラップの次の列に配置される要素を絶対的に変更します。
また、レスポンシブなデザインをするために、私はcubespinnerクラスでheightプロパティとwidthプロパティを使用したくない代わりに、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>EDIT：私は達成しようとしている表情の画像を追加しました
は、ここに私のコードです。現在のアニメーションでは、これを長く見たいと思っています。 
なぜ絶対配置を使用していますか？あなたの意図するレイアウトが何であるかという疑問からは明らかではありません。 –
はいいいえ私はより良い方法イメージのスクリーンショットを考えてください。 –