Question

我创建了一个使用Angular提供模板的网站，我使用CSS和Bootstrap设置了网站样式（以便更轻松地进行移动响应等）。该网站在桌面/移动设备上看起来不错，但是如果你调整窗口的大小，列会像它们应该的那样堆叠，但是背景图像会向上推，并在下方留下空白区域，并且列会从背景的底部向外倾斜。当拉出开发人员工具窗口时（矿井从底部出现）也会发生这种情况。它创造了白色空间。有没有办法让背景图像永远不会移动？在移动设备上我添加了一个媒体查询，它将堆叠的列放在一个带有最大高度的滚动框中，我的空格较少但底部仍有一点点。我尝试了背景位置中心和背景附件固定无济于事。我已经包含了它正在做的截图。

这是应用的基础HTML -

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Goldbee Dev</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="dist/styles/all.min.css">
  <link href='https://fonts.googleapis.com/css?family=Lobster|Roboto|Titillium+Web|Rock+Salt|Condiment|Mate+SC|Pacifico' rel='stylesheet' type='text/css'>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"> </script>
</head>
<body ng-app="app">


    <div ng-view></div>








<script src="vendor/angular.js"></script>
<script src="vendor/angular-route.js"></script>
<script src="vendor/angular-animate.js"></script>
<script src="dist/scripts/global.js"></script>
</body>
</html>

在开头加载的主页模板 -

<div class="container" id="main-container">
    <div class="title-area">
        <h1 class="home-title">GoldbeeDev 
            <img class="hvr-buzz" src="images/bee-icon-11.png">
        </h1>
        <h4>
            <button class="link hvr-hang" ng-click="contact()">Contact</button>|
                <button class="link hvr-hang" ng-click="about();">About</button>|
                    <button class="link hvr-hang" ng-click="portfolio()">Portfolio</button>
        </h4>
    </div>
</div>

点击投资组合后，它会加载此模板 -

 <img class="homelogo hvr-rotate" src="images\home.png" ng-click="$location.path('/')">
 <div class="container">



<div ng-include="portfolioPath" onload="finishLoading()">

</div>
 </div>

这是投资组合家庭包含HTML（我遇到这些问题） -

<div class="container pages" id="main-container">
    <div class="row">
        <div class="col-sm-4">
            <img class="portfolio-thumb hvr-grow" src="images\quotespic.png" ng-click="portClick(portfolioTemplates[1].url)">
                <p class="project-text">JS Quote Generator</p>
                </div>
        <div class="col-sm-4">
            <img class="portfolio-thumb hvr-grow" src="images\tictacpic.png" ng-click="tictacStart()">
                <p class="project-text">Tic Tac Toe JS</p>
                </div>
        <div class="col-sm-4">
            <img class="portfolio-thumb hvr-grow" src="images\moviesearchpic.png" ng-click="movieStart()">
                <p class="project-text">Movie Search</p>
                </div>
    </div>
    <div class="row">
        <div class="col-sm-4">
            <img class="portfolio-thumb hvr-grow" src="images\paginationpic.png" ng-click="portClick(portfolioTemplates[2].url)">
                <p class="project-text">jQuery Pagination</p>
                </div>
        <div class="col-sm-4">
            <img class="portfolio-thumb hvr-grow" src="images\redwolfpic.png" ng-click="portClick(portfolioTemplates[3].url)">
                <p class="project-text">Video Background Homepage</p>
                </div>
        <div class="col-sm-4">
            <img class="portfolio-thumb hvr-grow" src="images\singlepagepic.png" ng-click="recipeClick()">
                <p class="project-text">Angular Single Page App</p>
                </div>
    </div>
    </div>
</div>

和相应的CSS -

#main-container {
  margin-top: 5%;
}

#main-container:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('../../images/bluefuzzbg.jpg') no-repeat;
  background-size: cover;
  z-index: -99;
  opacity: 0.6;
}

.portfolio-thumb {
  max-width: 325px;
}

屏幕 -

这个问题似乎也发生在投资组合之外的其他模板上，并没有那么糟糕。我愿意接受任何建议/提示，感谢您花时间阅读本文。

Bootstrap Columns堆栈过去创建空白的背景图像

0 个答案: