Question

我正在尝试实现单页面应用程序，我希望div显示一个在另一个之下。但是在将视口大小调整为各种屏幕尺寸时，定位会重叠并在两者之间留出额外的空间。我有codepen示例以更好的方式解释问题。

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

如何让每个屏幕尺寸的div显示相同？我是否需要按照我创建页面布局的方式进行随机播放？

<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

首先，你的bootstrap结构不好，没有容器，没有行或col。试试这个：

<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;）

div位置没有响应css

1 个答案: