Нижний колонтитул почти на всю страницу - PullRequest
Новая
       47

Нижний колонтитул почти на всю страницу

0 голосов
/ 20 марта 2019

Моя проблема в нижнем колонтитуле.Когда список элементов пуст, нижний колонтитул достигает почти самой панели навигации.Я пытался как-то обойти это, но я не являюсь разработчиком внешнего интерфейса и мне это не удалось.Я использую Bootstrap 4, с пользовательским классом .page-footer.

Код CSS: 

.page-footer {
  padding: 2.5rem 0;
  color: #999;
  text-align: center;
  border-top: .05rem solid #e5e5e5;
}

HTML-код: 

    {% block footer %}
    <footer class="page-footer">
      <div class="container ">
          <div class="row">
          <div class="col-12 col-md">
            <img class="mb-2" src="{% static 'images/small_image.png' %}">
            <small class="d-block mb-3 text-muted">&copy; 2018</small>
          </div>

          <div class="col-6 col-md">
            <h5>Resources</h5>
            <ul class="list-unstyled text-small">
              <li><a class="text-muted" href="#">Resource</a></li>
              <li><a class="text-muted" href="#">Resource name</a></li>
              <li><a class="text-muted" href="#">Another resource</a></li>
              <li><a class="text-muted" href="#">Final resource</a></li>
            </ul>
          </div>

          <div class="col-6 col-md">
            <h5>Resources</h5>
            <ul class="list-unstyled text-small">
              <li><a class="text-muted" href="#">Resource</a></li>
              <li><a class="text-muted" href="#">Resource name</a></li>
              <li><a class="text-muted" href="#">Another resource</a></li>
              <li><a class="text-muted" href="#">Final resource</a></li>
            </ul>
          </div>

          <div class="col-6 col-md">
            <h5>Resources</h5>
            <ul class="list-unstyled text-small">
              <li><a class="text-muted" href="#">Resource</a></li>
              <li><a class="text-muted" href="#">Resource name</a></li>
              <li><a class="text-muted" href="#">Another resource</a></li>
              <li><a class="text-muted" href="#">Final resource</a></li>
            </ul>
          </div>

          </div>
      </div>
    </footer>
    {% endblock footer %}

вся HTML-страница: 

<!DOCTYPE html>
<html lang="en">

{% block header %}
  <head>

    <!-- Bootstrap core CSS -->
    <link href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
    <link href="{% static 'vendor/bootstrap/css/bootstrap.css' %}" rel="stylesheet">
  </head>
{% endblock header %}

  <body>

    <!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">Link</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar5">
        <span class="navbar-toggler-icon"></span>
    </button>
    {% if user.is_authenticated %}
        <div class="navbar-collapse collapse justify-content-stretch" id="navbar5">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#"> All links <span class="sr-only">Home</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">All links</a>
                </li>
            </ul>
            <form action="#" method="get" class="ml-3 my-auto d-inline w-20">
                <div class="input-group input-group-sm">
                  <input type="text" class="form-control border-right-0">
                  <div class="input-group-append">
                    <button class="btn btn-outline-primary border-left-0" type="submit">Search</button>
                  </div>
                </div>
            </form>

            <div class="my-auto d-inline ml-3">
                <ul class="navbar-nav">
                    <li><a role="button" href="#" type="button" class="btn btn-outline-primary btn-sm mr-3">Link</a></li>
                    <li><a role="button" href="#" type="button" class="btn btn-outline-primary btn-sm">Link</a></li>
                </ul>
            </div>

            <div class="nav navbar-nav ml-auto dropdown">
              <button class="btn btn-outline-primary btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                User
              </button>
              <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
                <a class="dropdown-item" href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Link</a>
        <a class="dropdown-item" href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Link</a>
                <a class="dropdown-item" href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Link</a>
                <a class="dropdown-item" href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Link</a>
              </div>
            </div>

        </div>
    {% endif %}
</nav>


    <!-- Page Content -->
    <div class="container">
      <div class="row">
        {% block content %}{% endblock content %}

        {% block sidebar %}
        <!-- Sidebar Widgets Column -->
        <div class="col-md-4">
          <!-- Categories Widget -->
          <div class="card my-4">
            <h5 class="card-header">Title</h5>
            <div class="card-body">
              <div class="row">
                <div class="col-lg-12">
                  <ul class="list-unstyled mb-0">
                        <li>
                          <a href="#">Link</a>
                        </li>
                  </ul>
                </div>
                <!--<div class="col-lg-6">-->
                  <!--<ul class="list-unstyled mb-0">-->
                    <!--<li>-->
                      <!--<a href="#">JavaScript</a>-->
                    <!--</li>-->
                    <!--<li>-->
                      <!--<a href="#">CSS</a>-->
                    <!--</li>-->
                    <!--<li>-->
                      <!--<a href="#">Tutorials</a>-->
                    <!--</li>-->
                  <!--</ul>-->
                <!--</div>-->
              </div>
            </div>
          </div>

          <!-- Side Widget -->
          <div class="card my-4">
            <h5 class="card-header">Side Widget</h5>
          </div>
        </div>
        {% endblock sidebar %}
      </div>
      <!-- /.row -->
    </div>
    <!-- /.container -->

    {% block footer %}
    <footer class="page-footer">
      <div class="container ">
          <div class="row">
          <div class="col-12 col-md">
            <img class="mb-2" src="{% static 'images/small_image.png' %}">
            <small class="d-block mb-3 text-muted">&copy; 2018</small>
          </div>

          <div class="col-6 col-md">
            <h5>Resources</h5>
            <ul class="list-unstyled text-small">
              <li><a class="text-muted" href="#">Resource</a></li>
              <li><a class="text-muted" href="#">Resource name</a></li>
              <li><a class="text-muted" href="#">Another resource</a></li>
              <li><a class="text-muted" href="#">Final resource</a></li>
            </ul>
          </div>

          <div class="col-6 col-md">
            <h5>Resources</h5>
            <ul class="list-unstyled text-small">
              <li><a class="text-muted" href="#">Resource</a></li>
              <li><a class="text-muted" href="#">Resource name</a></li>
              <li><a class="text-muted" href="#">Another resource</a></li>
              <li><a class="text-muted" href="#">Final resource</a></li>
            </ul>
          </div>

          <div class="col-6 col-md">
            <h5>Resources</h5>
            <ul class="list-unstyled text-small">
              <li><a class="text-muted" href="#">Resource</a></li>
              <li><a class="text-muted" href="#">Resource name</a></li>
              <li><a class="text-muted" href="#">Another resource</a></li>
              <li><a class="text-muted" href="#">Final resource</a></li>
            </ul>
          </div>
          </div>
      </div>
    </footer>
    {% endblock footer %}

  </body>
</html>

1 Ответ

1 голос
/ 20 марта 2019

Когда вы говорите:

нижний колонтитул достигает почти панели навигации

... и, основываясь на комментариях, кажется, что ваша проблема в том, что нижний колонтитулне всегда, по крайней мере, в нижней части экрана по вертикали и слишком близко подходит к вашей навигации.

Ваша проблема не обязательно заключается в самом нижнем колонтитуле, и есть несколько способов решить эту проблему в зависимости от желаемого результата.

Одним из решений является добавление 

  position:absolute;
  width: 100%;
  bottom:0;

... в нижний колонтитул, как я сделал в Этот кодовый элемент .

Есть дополнительныерешения в существующих ответах Как этот .

...