Как я могу сделать мой нижний колонтитул отзывчивым и выровнять текст по горизонтали? - PullRequest
Новая
       4

Как я могу сделать мой нижний колонтитул отзывчивым и выровнять текст по горизонтали?

1 голос
/ 04 мая 2020

Я работаю над проектом и, похоже, не могу найти способ центрировать и сделать мой нижний колонтитул отзывчивым. Это мой html код. 

#footer {
    position: absolute;
    left:0;
    bottom: 0;
    width: 100%;
    height: 2.5rem;
    background-color: black;
    border-top: 4px solid #F2D380 !important;
}
.socialIcon {//update
width: 20px;
}
<div id="footer">
  <div class="col-lg-2 link_list">
    <a href="#"> Company  Information </a>
  </div>
  <div class="col-lg-2 link_list">
    <a href="#" > Privacy Policy and User Agreement </a>
  </div>
  <div class="col-lg-2 link_list">
    <a href="about.html"> About </a>
  </div>
  <div class="col-lg-2 link_list">
    <a href="#" >
      ©2019 Copyright claim
    </a>
  </div>

```
<div class="col-sm-6  col-lg-3">//update
  	 <a href="#">
  		<img src="images/linkedin.png" class=" socialIcon">
  	 </a>
 <a href="#" >
  		<img src="images/instagram.png" class=" socialIcon">
  	 </a>
 <a href="#">
  		<img src="images/facebook.png" class=" socialIcon">
  	 </a>
 <a href="#" >
    <img src="images/youtube.png" class="socialIcon">
 </a>
   </div>
</div>
```

Я пробовал некоторые bootstrap классы, такие как justify-content-center, но он просто не работает. Я знаю, что мне нужно смотреть на flexbox, но он не сработает, и я не знаю, в чем проблема. Заранее благодарю за ответ. * Обновите после того, как я сделал то, что я видел в комментариях, он не работает с иконками социальных сетей.

Ответы [ 3 ]

1 голос
/ 04 мая 2020

Я редактировал ваши коды. Я объяснил, что я изменил в строках комментариев. Я удалил таблицу отображения. Вам не нужно это с этими кодами.

Html: 

 <div id="footer">
        <div class="row text-center"> // I added row here, and I've got all the columns in a row, because all columns must be in a row. I added a "text center" class to keep all the text in the middle.
            <div class="col-sm-6 pb-sm-2  col-lg-3"> // that's how I arranged your columns . So they will adjust their width for each width value
                <a href="#"> Company Information </a>
            </div>
            <div class="col-sm-6 col-lg-3">
                <a href="#"> Privacy Policy and User Agreement </a>
            </div>
            <div class="col-sm-6 pb-sm-2  col-lg-3"> // "pb-sm-2" class to add padding bottom when dimensions are sm
                <a href="about.html"> About </a>
            </div>
            <div class="col-sm-6  col-lg-3">
                <a href="#">
                    ©2019 Copyright claim
                </a>
            </div>
        </div>
    </div>

Css: 

#footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    /* height: 2.5rem; */ you can use padding this way instead of specifying height. if you give a single height value, you will need to set height separately for all dimensions.
    padding: 20px;
    background-color: black;
    border-top: 4px solid #F2D380 !important;
}

Я надеюсь, что я мог бы помочь. Удачи!

1 голос
/ 04 мая 2020

См. Код ниже. Вы можете забыть оборачивать каждый якорь в "div". Будет намного проще просто сгруппировать их в родительский DIV и затем нацелить их. Это должно работать, и вы можете иметь больше гибкости. Кроме того, не нужно беспокоиться о flexbox или каких-либо внешних библиотеках. 

<style>
body{
  height:2000px; /* for demonstration purposes*/
}

/* position the footer div RELATIVE and give it a "top" property of 100% so it always sits at the bottom regardless of your window height*/
#footer {
  position: relative;
  top:100%;
  width: 100%;
  height: 2.5rem;
  background-color: black;
  border-top: 4px solid #F2D380 !important;
}
 /* center all items INSIDE the link_list DIV*/
.link_list{
  text-align:center;
}
/* target all the ANCHOR tags as inline elements*/
.link_list a {
    margin:50% 20px;
    color:white;
    text-decoration:none;
    text-align: center;
    flex: 0 0 16.666667%;
  }
</style>
<body>
<div id="footer">
  <div class="col-lg-2 link_list">
    <a href="#"> Company  Information </a>
    <a href="#" > Privacy Policy and User Agreement </a>
    <a href="about.html"> About </a>
    <a href="#" >©2019 Copyright claim</a>
  </div>
</div>
</body>
0 голосов
/ 04 мая 2020

Добавьте display:flex; к #footer и получите немного отзывчивости.

quick fiddle => https://jsfiddle.net/0b9hoag1/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...