css - 如何减小页脚处使用的超大屏幕的尺寸？

Question

我正在开发一个元素，我在页脚处使用了 jumbotron。但是超大屏幕的高度很高。我使用尽可能多的 CSS 样式来减少它，但我做不到。谁能帮我解决这个问题？

我尝试手动设置超大屏幕的高度，但仍然无法正常工作。

.jumbotron{
         height : 20px;
}

我想提供整个代码的链接，您可以在其中找到实际问题。只关注使用超大屏幕完成的页脚。 https://jsfiddle.net/1b8gje6f/1/

Answer 1

我已将 footer 类添加到 footer div 并在 css 下方添加

.footer.jumbotron {
  padding-top: 5px;
  padding-bottom: 5px;
}

.footer.jumbotron p{
  margin-bottom: 0;
}

.fakeimg {
  height: 200px;
  background: #aaa;
}

.bgimg {
  background-color: black;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
}

.row {
  display: flex;
}

.footer.jumbotron {
  padding-top: 5px;
  padding-bottom: 5px;
}

.footer.jumbotron p{
  margin-bottom: 0;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="jumbotron text-center bgimg" style="margin-bottom:0;color:white;text-align:left">
  <h1>Raitu Nestam</h1>
  <p>Believe in the future of Agriculture.</p>
</div>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#homePage.html">Raitu Nestam</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li><a href="homePage.html">Home</a></li>
        <li class="active"><a href="aboutUs.html">About Us</a></li>
        <li><a href="#">Services</a></li>
      </ul>
    </div>
  </div>
</nav>

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-2" style="background-color:black">
      <ul class="nav nav-pills nav-stacked" style="margin-top:11%">

        <li class="active"><a href="#">Add Land Details</a></li>
        <li><a href="#">Show Land Details</a></li>
        <li><a href="#">Weather Details</a></li>
        <!-- <li><a href="#">Link 3</a></li>-->
      </ul>
      <!--<ul class="nav nav-pills nav-stacked">
        <li class="active"><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
      </ul>-->

      <hr class="hidden-sm hidden-md hidden-lg">
    </div>
    <div class="col-sm-10" style="background-color:white;border-style:solid;">
      <h2>About us</h2>
      <!--<h5>Title description, Dec 7, 2017</h5>-->
      <!--<div class="fakeimg">Fake Image</div>-->
      <p>Agriculture is the backbone of the Indian Economy"- said Mahatma Gandhi six decades ago. Even today, the situation is still the same, with almost the entire economy being sustained by agriculture, which is the mainstay of the villages. It contributes
        16% of the overall GDP and accounts for employment of approximately 52% of the Indian population. Rapid growth in agriculture is essential not only for self-reliance but also to earn valuable foreign exchange. .</p>
      <p>Indian farmers are second to none in production and productivity despite of the fact that millions are marginal and small farmers. They adopt improved agriculture technology as efficiently as farmers in developed countries. It is felt that with
        provision of timely and adequate inputs such as fertilizers, seeds, pesticides and by making available affordable agricultural credit /crop insurance, Indian farmers are going to ensure food and nutritional security to the Nation.</p>
      <br>
      <p>It is envisaged to make available relevant information and services to the farming community and private sector through the use of information and communication technologies, to supplement the existing delivery channels provided for by the department.
        Farmers’ Portal is an endeavour in this direction to create one stop shop for meeting all informational needs relating to Agriculture, Animal Husbandry and Fisheries sectors production, sale/storage of an Indian farmer. With this Indian Farmer
        will not be required to sift through maze of websites created for specific purposes.</p><br>
      <p>Once in the Farmers’ Portal, a farmer will be able to get all relevant information on specific subjects around his village/block /district or state. This information will be delivered in the form of text, SMS, email and audio/video in the language
        he or she understands. These levels can be easily reached through the Map of India placed on the Home page. Farmers will also be able to ask specific queries as well as give valuable feedback through the Feedback module specially developed for
        the purpose.</p>
    </div>
  </div>
</div>

<div class="jumbotron text-center footer" style="margin-bottom:0;">
  <p>Footer</p>
</div>