Question

我想达到以下结果：

要求：

图片应该响应
固定顶部导航栏必须保留
没有垂直滚动
页脚也必须留下（最好是在底部）

我花了一整天的时间试图找出它没有结果。我试过这种方法：

https://codepen.io/Codewife_101/pen/rpvdPq

但是＆＃39; align-self-center＆＃39;导致我的网站垂直滚动。它看起来并不好看，特别是在移动设备上。

I VERSION：

  <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Red Logo Website</title>
      <link rel="stylesheet" href="css/font-awesome.min.css">
      <link rel="stylesheet" href="css/bootstrap.css">
      <link rel="stylesheet" href="css/custom.css">
      <!--Material Design Icons-->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
          rel="stylesheet">
      <!--adding Roboto different styles-->
      <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900" rel="stylesheet">
    </head>
    <body>
      <nav class="navbar navbar-expand-sm navbar-light bg-light fixed-top">
        <div class="container">
          <img src="img/navbar_red_logo.32x32.png" class="img-fluid" alt="red-logo">
          <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav2"><span class="navbar-toggler-icon"></span></button>
          <div class="collapse navbar-collapse" id="navbarNav2">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item">
                <a class="nav-link font-weight-bold" href="">Brand Name</a>
              </li>
            </ul>
            <ul class="navbar-nav ml-auto">
              <li class="nav-item">
                <a class="nav-link" href="#about">About</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#about">Contact</a>
              </li>
            </ul>
          </div>
        </div>
      </nav>

      <!-- 1. JUMBOTRON -->
      <section id="showcase">
        <div class="container h-100">
          <div class="row h-100 justify-content-center align-self-center">
            <img src="img/red_logo.svg" class="img-fluid" alt="Red logo">
          </div>
        </div>
      </section>


      <!--FOOTER-->
      <footer id="main-footer" class="text-center">
        <div class="container">
          <div class="row">
            <div class="col">
            <p class="text-muted">Copyright &copy; 2017 <img src="img/navbar_red_logo.32x32.png" class="img-fluid" alt="red-logo"> RedDesign LLC</p>      
          </div>
        </div>
      </footer>


      <script src="js/jquery.min.js"></script>
      <script src="js/popper.min.js"></script>
      <script src="js/bootstrap.min.js"></script>
    </body>
    </html>

我也试过这种方法：

https://codepen.io/Codewife_101/pen/eyVxre

II版本：

  <nav class="navbar navbar-expand-sm navbar-light bg-light fixed-top">
    <div class="container">
      <img src="img/navbar_red_logo.32x32.png" class="img-fluid" alt="red-logo">
      <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav2"><span class="navbar-toggler-icon"></span></button>
      <div class="collapse navbar-collapse" id="navbarNav2">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <a class="nav-link font-weight-bold" href="">Brand Name</a>
          </li>
        </ul>
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link" href="#about">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#about">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- 1. JUMBOTRON -->
  <section id="showcase">
    <div class="container h-100">
      <div class="row h-100 justify-content-center align-items-center">
        <img src="https://s3-us-west-1.amazonaws.com/all-images-public/red_logo.svg" class="img-fluid" alt="Red logo">
      </div>
    </div>
  </section>


  <!--FOOTER-->
  <footer id="main-footer" class="text-center">
    <div class="container">
      <div class="row">
        <div class="col">
        <p class="text-muted">Copyright &copy; 2018 <img src="img/navbar_red_logo.32x32.png" class="img-fluid" alt="red-logo"> RedDesign LLC</p>      
      </div>
    </div>
  </footer>

它不是垂直居中的。我对任何建议/解决方案持开放态度。任何人？我会非常感谢任何提示。

乍一看，我的问题看似重复，但当你看得更深，你会发现我的情况有所不同。此外，我的声誉太低，无法对别人的问题发表评论。

Answer 1

使用CSS

然后

css属性position:fixed 你的标题

div id = "NAVBAR"

你的页脚也是

div id = "FOOTER"

在你的css中：

    #NAVBAR{
    bottom:0
           }

   #FOOTER{
    top:0
           }

你必须根据你的屏幕分辨率设置身体的高度，以便你没有滚动效果。

Answer 2

请尝试这个，由于calc和vh（视口高度）

，它围绕动态高度

nav, footer{
  max-height: 50px;
}

body,html, section{
  height: 100%;
}
section{
  display: flex !important;
  justify-content: center;
  align-items: center;
}


section img{
  object-fit: contain;
  height: calc(100vh - 150px) !important; 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

<nav class="navbar navbar-default navbar-fixed-top">

  <a class="navbar-brand" href="#">Navbar</a>

 <ul class="navbar-nav nav">
   <li class="nav-item"><a href="" class="nav-link">Link</a></li>
   <li class="nav-item"><a href="" class="nav-link">Link</a></li>
   <li class="nav-item"><a href="" class="nav-link">Link</a></li>
 </ul>
</nav>

<section>
  <img src="http://www.tandemconstruction.com/sites/default/files/styles/project_slider_main/public/images/project-images/IMG-Residence-1_0.jpg" alt="" class="img-fluid">
</section>

<footer class="navbar navbar-default navbar-fixed-bottom text-center">
   <p class="text-muted navbar-brand">Copyright &copy; 2018 RedDesign LLC</p> 
</footer>

Answer 3

我修复了你的代码。以下是工作版本。

问题是一个简单的初学者错误：你有一个连续的图像，但不是一列。 Bootstrap行和列旨在协同工作。因此，无论何时创建.row，您都必须在该行中创建至少一个.col。这通常可以解决所有问题。

这是您的代码的工作版本：

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">


<nav class="navbar navbar-expand-sm navbar-light bg-light fixed-top">
    <div class="container">
        <img src="img/navbar_red_logo.32x32.png" class="img-fluid" alt="red-logo">
        <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav2"><span class="navbar-toggler-icon"></span></button>
        <div class="collapse navbar-collapse" id="navbarNav2">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item">
                    <a class="nav-link font-weight-bold" href="">Brand Name</a>
                </li>
            </ul>
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#about">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#about">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<!-- 1. JUMBOTRON -->
<section id="showcase">
    <div class="container" style="height: 100vh;">
        <div class="row h-100">
            <div class="col align-self-center">
                <img src="https://picsum.photos/440/" class="img-fluid mx-auto d-block">
           </div>
        </div>
    </div>
</section>

<!--FOOTER-->
<footer id="main-footer" class="text-center fixed-bottom">
    <div class="container">
        <div class="row">
            <div class="col">
                <p class="text-muted">Copyright &copy; 2018 <img src="img/navbar_red_logo.32x32.png" class="img-fluid" alt="logo"> RedDesign LLC</p>
            </div>
        </div>
    </div>
</footer>


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>

＆＃13;

如何将图像置于Bootstrap 4中，使用固定顶部导航栏，而不进行垂直滚动？

3 个答案: