divポジションが反応しないCSS

Question

divを1つ下に表示したい単一のページアプリケーションを実装しようとしています。しかし、さまざまな画面サイズにビューポートのサイズを変更すると、位置が重複し、その間に余分なスペースが残っています。私は問題をより良い方法で説明するためにcodepenの例を持っています。 div要素は、すべての画面サイズで同じに見えるようにする方法

https://codepen.io/SaloniDesai/pen/zPBZJr

？私はページのレイアウトを作成している方法をシャッフルする必要がありますか？

<div id="headliner" class="jumbotron text-center"> 
      <h1>SearchGIFY app</h1> 
      <p>search for any GIF you want!</p> 
     </div> 
     <div id="search"> 
      <form> 
       <input type="search" ng-model="vm.search.gif" value="" placeholder="type what you're looking for" /> 
       <button type="submit" class="btn btn-primary" ng-click="vm.performSearch()">Search</button> 
      </form> 
     </div> 
     <div class="row"> 
      <div class="card"> 
       <img ng-repeat="g in vm.giphies" ng-src="{{g.images.original.url}}" height="{{g.images.fixed_height}}" title="{{g.title}}"> 
      </div> 
     </div> 
     <div class="jumbotron text-center" id="trendingBar"> 
      <h3>Trending gifs</h3> 
      <div class="row"> 
       <div class="thumbnail"> 
        <img ng-repeat="trending in vm.trendingGifs" ng-src="{{trending.images.original.url}}" height="{{trending.images.fixed_height.height}}" title="{{trending.title}}"> 
       </div> 
      </div> 
      </div> 

Answer 1

まず、ブートストラップ構造が良くない、コンテナがない、行または列がありません。 この方法を試してください。

<div class="container-fluid"> 
    <div class="row"> 
    <div id="headliner col-md-12" class="jumbotron text-center"> 
     <h1>SearchGIFY app</h1> 
     <p>search for any GIF you want!</p> 
    </div> 
    </div> 
    <div class="row"> 
    <div id="search"> 
     <div class="col-md-12"> 
     <form class="form-inline text-center col-md-6 col-md-offset-3"> 
      <div class="form-group"> 
      <input class="form-control" type="search" ng-model="vm.search.gif" value="" 
        placeholder="type what you're looking for"/> 
      </div> 
      <button type="submit" class="btn btn-primary" ng-click="vm.performSearch()">Search</button> 
     </form> 
     </div> 
    </div> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-md-12"> 
    <div class="card"> 
     <img ng-repeat="g in vm.giphies" ng-src="{{g.images.original.url}}" height="{{g.images.fixed_height}}" 
      title="{{g.title}}"> 
    </div> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-md-12"> 
    <div class="jumbotron text-center" id="trendingBar"> 
     <h3>Trending gifs</h3> 
     <div class="thumbnail"> 
     <img ng-repeat="trending in vm.trendingGifs" ng-src="{{trending.images.original.url}}" 
      height="{{trending.images.fixed_height.height}}" title="{{trending.title}}"> 
     </div> 
    </div> 
    </div> 
</div> 

第二に、あなたは％の高さと幅との絶対的なクラスの多くを追加します。ブートストラップを使用している場合は、すべての応答がブートストラップグリッドによってcolクラスで処理されます。グリッド・ブートストラップのドキュメントを簡単に見てみ：https://getbootstrap.com/docs/3.3/css/#grid

は、ここではいくつかの変更で応答作業codepenです：https://codepen.io/anon/pen/MOemgw;）