Question

您好我试图制作一些东西，但页脚后面有很多空白区域（如果我可以这样称呼它）这是图片： After that "Sponzori" there is a lot of white space as u can see

这里是html代码

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Heroic Features - Start Bootstrap Template</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/heroic-features.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>

    <!-- Navigation -->
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="">Odred izviđača "IBAR"</a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li>
                        <a href="about">O nama</a>
                    </li>
                     <li>
                        <a href="uprava">Uprava</a>
                    </li>
                    <li>
                        <a href="actions">Akcije</a>
                    </li>
                    <li>
                        <a href="cete">Čete</a>
                    </li>
                    <li>
                        <a href="news">Vijesti</a>
                    </li>
                    <li>
                        <a href="contact">Kontakt</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>


<center><h1>Uprava odreda</h1></center>

<hr>
<div id="id1"></div>
<div id="id2"></div>
<div id="id3"></div>
<div id="id4"></div>
<div id="id5"></div>
<div id="id6"></div>
  </div>
  </div>
<div class="container">
<div class="row">
<br>

<br>

        <div id="span4_well"><div class="span3 well">
        <div id="id1">
        <h3>Muamer Klimenta</h3>
        <a href="#aboutModal" data-toggle="modal"><img src="<%= asset_path( 'muamer.png' ) %>" name="aboutme" width="140" height="140" class="img-circle"></a>
            <h3>Načelnik</h3>
            <p><a href="#biografija1" class="btn btn-primary btn-large">Biografija</a>
           <center><div id="id2">
        <h3>Almedin Džudžević</h3>
        <a href="#aboutModal" data-toggle="modal"><img src="<%= asset_path( 'muamer.png' ) %>" name="aboutme" width="140" height="140" class="img-circle"></a>
            <h3>Starješina</h3>
        <p><a href="#biografija1" class="btn btn-primary btn-large">Biografija</a></center>
        <div id="id3">
        <h3>Haris Kalač</h3>
        <a href="#aboutModal" data-toggle="modal"><img src="<%= asset_path( 'muamer.png' ) %>" name="aboutme" width="140" height="140" class="img-circle"></a>
            <h3>Starješina/Menadžer</h3>
        <p><a href="#biografija1" class="btn btn-primary btn-large">Biografija</a>        
        <div id="id4">
        <h3>Samir Monić</h3>
        <a href="#aboutModal" data-toggle="modal"><img src="<%= asset_path( 'muamer.png' ) %>" name="aboutme" width="140" height="140" class="img-circle"></a>
            <h3>Sekretar</h3>
        <p><a href="#biografija1" class="btn btn-primary btn-large">Biografija</a>
            <div id="id5">
        <center><h3>Ilda Alomerović</h3>
        <a href="#aboutModal" data-toggle="modal"><img src="<%= asset_path( 'muamer.png' ) %>" name="aboutme" width="140" height="140" class="img-circle"></a>
            <h3>Ženski starješina odreda</h3>
        <p><a href="#biografija1" class="btn btn-primary btn-large">Biografija</a>
        <div id="id6">
        <h3>Eldin Brđanin</h3>
        <a href="#aboutModal" data-toggle="modal"><img src="<%= asset_path( 'muamer.png' ) %>" name="aboutme" width="140" height="140" class="img-circle"></a>
            <h3>Predstavnik odreda</h3>
        <p><a href="#biografija1" class="btn btn-primary btn-large">Biografija</a>
    </div>
    </div>
    </div>
</div>
</div>
</div>
      
<center><h1 id="id15">Vodnici</h1></center>

<hr>
<div id="id2"></div>
<div id="id3"></div>
<div id="id15"></div>
<div id="id11"></div>
<div id="id10"></div>
<div id="id7"></div>
<div id="id8"></div>
<div id="id9"></div>
  </div>
  </div>
<div class="container">
<div class="row">    <div id="span3_well"><div class="span well">
        <div id="id7">
        <h3>Rejhan Hodžić</h3>
        <a href="#aboutModal" data-toggle="modal"><img src="<%= asset_path( 'muamer.png' ) %>" name="aboutme" width="140" height="140" class="img-circle"></a>
            <h3>Vodnik</h3>
            <p><a href="#biografija1" class="btn btn-primary btn-large">Biografija</a>
           <center><div id="id2">
        <h3>Zijad Kurpejović</h3>
        <a href="#aboutModal" data-toggle="modal"><img src="<%= asset_path( 'muamer.png' ) %>" name="aboutme" width="140" height="140" class="img-circle"></a>
            <h3>Vodnik</h3>
        <p><a href="#biografija1" class="btn btn-primary btn-large">Biografija</a></center>
        <div id="id3">
        <h3>Vedad Selmanović</h3>
        <a href="#aboutModal" data-toggle="modal"><img src="<%= asset_path( 'muamer.png' ) %>" name="aboutme" width="140" height="140" class="img-circle"></a>
            <h3>Vodnik</h3>
        <p><a href="#biografija1" class="btn btn-primary btn-large">Biografija</a>        
    </div>
    </div>
    <br>
    <center><h1 id="id11">Marketing</h1></center>
     <center><div id="id10">
     <h3>Eldin Kurpejović</h3>
        <a href="#aboutModal" data-toggle="modal"><img src="<%= asset_path( 'muamer.png' ) %>" name="aboutme" width="140" height="140" class="img-circle"></a>
            <h3>Tehnička podrška/Marketing</h3></center>
        <center><p id="id12"><a href="#biografija1" class="btn btn-primary btn-large">Biografija</a></center>
         </div>
    </div>
</div>
</div>
</div>

 <!-- Title -->
    <div class="footer"> <div class="row">
            <div class="col-lg-12">
                <center><h3>Sponzori</h3></center>
            </div>
        </div>
        <!-- /.row -->

        <!-- Page Features -->
        <div class="row text-center">

            <div class="col-md-3 col-sm-6 hero-feature">
                <div class="thumbnail">
                    <img src="http://placehold.it/800x500" alt="">
                    <div class="caption">
                        <h3>Ime sponzora</h3>
                        <p>Opis sponzora</p>
                        <p>
                            <a href="#" class="btn btn-primary">Posjetite</a>
                        </p>
                    </div>
                </div>
            </div>

            <div class="col-md-3 col-sm-6 hero-feature">
                <div class="thumbnail">
                    <img src="http://placehold.it/800x500" alt="">
                    <div class="caption">
                        <h3>Ime sponzora</h3>
                        <p>Opis sponzora</p>
                        <p>
                            <a href="#" class="btn btn-primary">Posjetite</a>
                        </p>
                    </div>
                </div>
            </div>

            <div class="col-md-3 col-sm-6 hero-feature">
                <div class="thumbnail">
                    <img src="http://placehold.it/800x500" alt="">
                    <div class="caption">
                        <h3>Ime spnzora</h3>
                        <p>Opis sponzora</p>
                        <p>
                            <a href="#" class="btn btn-primary">Posjetite</a>
                        </p>
                    </div>
                </div>
            </div>

            <div class="col-md-3 col-sm-6 hero-feature">
                <div class="thumbnail">
                    <img src="http://placehold.it/800x500" alt="">
                    <div class="caption">
                        <h3>Ime sponzora</h3>
                        <p>Opis sponzora</p>
                        <p>
                            <a href="#" class="btn btn-primary">Posjetite</a>
                        </p>
                    </div>
                </div>
            </div>
            </div>
        </div>
        </div>

这里是css文件

#id2 {
    position: relative; /* Declared position allows for location changes */
    top: -285px; /* Moves the image 2px closer to the top of the page */
}

#id3 {float: right; 
   position: relative; /* Declared position allows for location changes */
    top: -585px; /* Moves the image 2px closer to the top of the page */
}


#id4 {position: relative; /* Declared position allows for location changes */
    top: 0px; /* Moves the image 2px closer to the top of the page */
left:-875px;}


#id5 {
   position: relative; /* Declared position allows for location changes */
    top: -287px; /* Moves the image 2px closer to the top of the page */
    right: -435px;
}

#id6 {
   position: relative; /* Declared position allows for location changes */
    top: -287px; /* Moves the image 2px closer to the top of the page */
    right: -385px;
}

#id15 {position: relative;
right: -125px;}

#span3_well {position: relative;
top:-796px;
left: -14px;}

#id11 {position: relative;
right: -100px;
top: -300px;}

#id10 {position: relative;
right: -95px;
top: -300px;}

#id12 {position: relative;
top: -300px;}

.row {position: relative;
top: -305px;}

#span4_well {position: relative;
top: 250px;}


.footer {
    position: relative;
    bottom: 800px;
}

在这里做什么新手

Answer 1

降低bottom

的.footer值

.footer {
    position: relative;
    bottom: 15px; /* example */
}

演示：http://jsbin.com/guqibeluxi/edit?output

页脚后空格是白色的？

1 个答案: