BootStrapグリッドが正しく機能していませんか？

私はこのウェブページで作業していますが、今までほとんどの時間をアニメーションを完成させるだけの時間が費やされています。したがって、実際にコンテンツはありません。あなたが写真で見ることができるように、私が抱えている問題は、Hello Worldというフレーズを含む「行」divです！グレーとオレンジ色の空白のdivを含む「行」のすぐ上に何とか落ちます。私の人生のために、私は理由を理解することができません。私が考えることができるのは、ブートストラップなどへのリンクに問題があるかもしれないということだけです。すべてのコードとスクリーンショットは以下の通りです。あなたの助けを前にありがとう。BootStrapグリッドが正しく機能していませんか？

今のところ重要な問題ではなく、ナビバの上に小さな白い隙間があるのはなぜですか？

Link to screenshot of top 1/3rd of page and browser

<!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"> 
<meta name="author" content="Timothy Sutterby"> 
<!-- <meta HTTP-EQUIV="refresh" CONTENT="10"> --> 
<!-- The above 3 meta tags *must* come first in the head; any other head 
    content must come *after* these tags --> 

<title>T G Sutterby</title> 

<link rel="stylesheet"   href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<script src="https://use.fontawesome.com/880f652677.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script> 
<link rel="stylesheet" href="CSS/TGSstyles.css"> 

</head> 

<body> 

<!-- Modals --> 



<!-- End Modals --> 

<!-- Nav Bar --> 

<nav class="navbar navbar-inverse"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
</button> 
    </div> 
    <a class="navbar-brand" id="navbar-brand" href="#"><span id="brand- span">Brand</span></a> 
    <div class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav navbar-left"> 
      <li><a href="#">Left</a></li> 
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">L Down <span class="caret"></span></a> 
       <ul class="dropdown-menu"> 
        <li><a href="#">Action</a></li> 
        <li><a href="#">Another action</a></li> 
        <li><a href="#">Something else here</a></li> 
        <li role="separator" class="divider"></li> 
        <li><a href="#">Separated link</a></li> 
        <li role="separator" class="divider"></li> 
        <li><a href="#">One more separated link</a></li> 
       </ul> 
      </li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">D Right <span class="caret"></span></a> 
       <ul class="dropdown-menu"> 
        <li><a href="#">Action</a></li> 
        <li><a href="#">Another action</a></li> 
        <li><a href="#">Something else here</a></li> 
        <li role="separator" class="divider"></li> 
        <li><a href="#">Separated link</a></li> 
        <li role="separator" class="divider"></li> 
        <li><a href="#">One more separated link</a></li> 
       </ul> 
      </li> 
      <li><a href="#contact">Right</a></li> 
     </ul> 
    </div> 
</nav> 

<!-- End Nav Bar --> 

<!-- Body Elements --> 

<div class="container-fluid"> 

    <!-- Animated/Expanding Div --> 

    <div class="row outeranimDiv-TGS" id="outeranimDiv"> 
     <div class="leftanimDiv col-lg-5" id="animDiv2"></div> 
     <div class="animDiv-TGS col-lg-2" id="animDiv1"></div> 
     <div class="rightanimDiv col-lg-5" id="animDiv3"></div> 
    </div> 

    <!-- End Animated/Expanding Div --> 

    <!-- Actual Body --> 

    <div class="row bodyTGS"> 
     Hello World! 
    </div> 

    <!-- End Actual Body --> 

</div> 

<!-- End Body Elements --> 

<!-- Scripts --> 
<script> 
    $(document).ready(function() { 
     $("#animDiv1").animate({ 
      height: "400px" 
     }, 500); 
     $("#animDiv2, #animDiv3").delay(501).animate({ 
      backgroundColor: "gray" 
     }, 500); 
    }); 

</script> 
<!-- End Scripts --> 


</body>

とCSS：

body { 
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; 
color: #333; 
font-size: 12px; 
background-color: black; 
height: 100vh; 
width: 100vw; 
padding: 0; 
} 

.bodyTGS { 
} 

.outeranimDiv-TGS { 
z-index: -1; 
position: absolute; 
top: 0px; 
width: 100%; 
text-align: center; 
height: 400px; 
} 

.animDiv-TGS { 
position: relative; 
margin: 0 auto; 
height: 2px; 
width: 20%; 
background-color: #ff9900; 
} 

.leftanimDiv { 
position: relative; 
margin: 0 auto; 
background-color: black; 
width: 40%; 
height: 400px; 
z-index: -1; 
} 

.rightanimDiv { 
position: relative; 
margin: 0 auto; 
background-color: black; 
width: 40%; 
height: 400px; 
z-index: -1; 
} 

.navbar-brand { 
position: absolute; 
font-size: 35px; 
width: 100%; 
left: 0; 
text-align: center; 
margin: 0 auto; 
} 

.navbar-toggle { 
z-index: 3; 
} 

.navbar-right { 
margin-right: 2px; 
}

出典

2017-03-26 Timothy

outeranimDiv-TGSクラスは、絶対位置を持っている

いずれに浮遊し、その後、フロートをクリアしたりしようとする絶対位置を変更しますポジションアブソリュートの後に静的要素を表示するためのここで提案されたソリューション Static elements after position:absolute

達成したいことは明確ではありません。Hello Worldがどこに現れるかを示す画像を投稿できますか？

出典

2017-03-26 23:33:34 SirNarsh

私はposition：absoluteを使用しました。私はZ-index：-1を使って2つの灰色のdivとオレンジ色のdivをnavbarの後ろに移動させたからです。オレンジ色のdivには、ページの読み込み時の高さを400pxに変更するアニメーションが含まれているため、これを行いました。それはnavbarの背後に20pxの背の高いように始まります。私が理解しているように、Zインデックスを使用するには、絶対的、固定的、または相対的な位置を使用する必要がありますか？ Hello Worldを含むdivが必要です！オレンジとグレーのdivの下になるようにします。 – Timothy

さて、位置を相対作業に変更してください。なぜそれが問題なのかまだ分かりませんが、うまくいけば機能します。ありがとうございました@SirNarsh。 – Timothy

BootStrapグリッドが正しく機能していませんか？

答えて

関連する問題