Как я могу исправить этот нижний колонтитул? - PullRequest
Новая
       20

Как я могу исправить этот нижний колонтитул?

0 голосов
/ 29 мая 2018

Так что я делаю нижний колонтитул с начальной загрузкой, он выглядит великолепно, но когда я добавляю это разрешение (изображение ниже), появляется пробел.

Boostrap Footer:

enter image description here

Вот что я сделал: 

<footer>
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-6">
        <h6>Copyright &copy; 2018</h6>
      </div>
      <div class="col-sm-6">
        <h6>About us</h6>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget sapien dolor. Nam aliquam augue ante, et sodales felis vulputate iaculis.</p>
      </div>
    </div>
  </div>
</footer>

footer{
 background: #333;
 color: #eee;
 font-size: 11px;
 padding: 20px;
}

Как я могу это исправить?

При подходе Нихила это происходит

попытка

Ответы [ 3 ]

0 голосов
/ 29 мая 2018

Я не уверен, что это то, что вам нужно, но вы можете просто добавить style="min-height:100vh" в контейнер содержимого своей страницы и поместить нижний колонтитул в другой контейнер.

Таким образом, нижний колонтитул всегда будет в нижней части вашегостр.

0 голосов
/ 29 мая 2018

Position fixed удаляет элемент из нормального потока содержимого.Поэтому вам нужно использовать bottom: 0;, чтобы расположить нижний колонтитул в самом низу. 

.postion-b-0 {
  bottom: 0;
}

Большая часть кода CSS не нужна.Вам нужно использовать только свойство выше.

.postion-b-0 {
  bottom: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<footer class="position-fixed container-fluid bg-dark text-white py-5 postion-b-0">
  <div class="row">
    <div class="col-6 ">
      <h6>Copyright &copy; 2018</h6>
    </div>
    <div class="col-6">
      <h6>About us</h6>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget sapien dolor. Nam aliquam augue ante, et sodales felis vulputate iaculis.</p>
    </div>
  </div>
</footer>

Столбцы занимают половину строк в приведенном выше коде.Но если вы хотите использовать колонку полной ширины на мобильном устройстве, используйте код ниже.

.postion-b-0 {
  bottom: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<footer class="position-fixed container-fluid bg-dark text-white py-5 postion-b-0">
  <div class="row">
    <div class="col-12 col-sm-6 ">
      <h6>Copyright &copy; 2018</h6>
    </div>
    <div class="col-12 col-sm-6">
      <h6>About us</h6>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget sapien dolor. Nam aliquam augue ante, et sodales felis vulputate iaculis.</p>
    </div>
  </div>
</footer>
0 голосов
/ 29 мая 2018

это будет работать: 

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <title>Bootstrap Example</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    
        <!-- jQuery library -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
        <!-- Latest compiled JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <style>
            .footer {
                position: fixed;
                left: 0;
                bottom: 0;
                width: 100%;
                background-color: black;
                color: white;
                text-align: center;
            }
        </style>
    
    </head>
    
    <body>
    
        <div class="footer">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-6 col-xs-6 col-md-6 col-lg-6">
                        <h6>Copyright &copy; 2018</h6>
                    </div>
                    <div class="col-sm-6 col-xs-6 col-md-6 col-lg-6">
                        <h6>About us</h6>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget sapien dolor. Nam aliquam augue
                            ante, et sodales felis vulputate iaculis.</p>
                    </div>
                </div>
            </div>
        </div>
    
    </body>
    
    </html>

скрипка : https://jsfiddle.net/rq3eab2v/2/

если вы используете загрузчик 4, используйте col- * вместо col-xs- * ok

...