如何减小页脚中使用的超大尺寸？

时间：2019-04-08 05:16:39

标签： css twitter-bootstrap

我正在开发一个项目，其中在页脚处使用了巨无霸。但是，巨型飞船的高度很高。我使用了多达CSS样式来减少它，但是我做不到。谁能帮助我解决这个问题？

我试图手动设置超大型飞行器的高度，但仍然无法正常工作。

.jumbotron{
         height : 20px;
}

我想提供整个代码的链接，您可以在其中找到实际的问题。只需关注使用超大型飞机完成的页脚即可。 PreparedStatement

4 个答案:

答案 0 :(得分：0)

try { JSONArray array = new JSONArray(); ArrayList<HashMap<String,Object>> jadwalHarianList = new ArrayList<>(); JSONObject jsonObject=new JSONObject(); try { jsonObject.put("Kelas", "R28"); jsonObject.put("Sesi", "1"); jsonObject.put("Mata_Kuliah", "Pemprograman #1"); array.put(jsonObject); jsonObject = new JSONObject(); jsonObject.put("Kelas", "R28"); jsonObject.put("Sesi", "2"); jsonObject.put("Mata_Kuliah", "Algoritma #2"); array.put(jsonObject); } catch (Exception e) { Log.e("ldfjdlfj","data----111_jsonOb_ex>>>"+e); } Log.e("ldfjdlfj","data----2222>>>"+array); String previous = ""; for (int i = 0; i < array.length(); i++) { JSONObject jadwal = array.getJSONObject(i); String kelas = jadwal.getString("Kelas"); String Sesi = jadwal.getString("Sesi"); String Mata_Kuliah = jadwal.getString("Mata_Kuliah"); if(kelas.equalsIgnoreCase(previous)) { HashMap<String,Object> map = new HashMap<>(); map.put("kelas",array.getJSONObject(i-1).getString("Kelas")); map.put("Sesi",array.getJSONObject(i-1).getString("Sesi")); map.put("Sesi2",Sesi); map.put("Mata_Kuliah",Mata_Kuliah); jadwalHarianList.add(map); } else { previous = kelas; HashMap<String,Object> map = new HashMap<>(); map.put("kelas",array.getJSONObject(i).getString("Kelas")); map.put("Sesi",array.getJSONObject(i).getString("Sesi")); map.put("Sesi2",""); map.put("Mata_Kuliah",Mata_Kuliah); jadwalHarianList.add(map); } } Log.e("ldfjdlfj","data----333_>>>"+jadwalHarianList); } catch (JSONException e) { e.printStackTrace(); } 类具有jumbotron属性，该属性使其尺寸更大。您可以更改高度以对其进行修改。

padding

答案 1 :(得分：0)

我已将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>

答案 2 :(得分：0)

请使用以下代码：-

.fakeimg {
    height: 200px;
    background: #aaa;
  }
.bgimg{
         background-color:black;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: center;
      }
      .row{
          display: flex;
      }
 
 .jumbotron{
height:auto;
padding:5px 0 !important;
 }
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>
<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" style="margin-bottom:0;">
  <p>Footer</p>
</div>

<!-- begin snippet: js hide: false console: true babel: false -->

答案 3 :(得分：0)

您可以尝试以下样式=“ height：10px;

相关问题
最新问题