как добавить границу на контейнер Div - PullRequest
Новая
       22

как добавить границу на контейнер Div

0 голосов
/ 30 апреля 2020

Я пытаюсь ограничить div, который содержит 4 fa-иконки. Так как я установил родительский div как Container, граница автоматически занимает большой отступ слева и справа по горизонтали. Я также пытался вложить bootstrap сетки, но это не помогает. Может ли кто-нибудь помочь с этим?

ПРИМЕЧАНИЕ: отступ не должен превышать 1 пикселя со всех сторон, а div должен быть точно в центре страницы.

enter image description here HTML: 

<div class="container" id="socialIcons">
        <div class="row">
            <div class="col-md-12">
              <a href="https://www.google.com">
                  <i class="fab fa-linkedin fa-3x "></i>
              </a>
              <a href="https://www.google.com" target="_blank">
                  <i class="fab fa-youtube fa-3x"></i>
              </a>
              <a href="https://www.google.com">
                  <i class="fab fa-instagram fa-3x"></i>
              </a>
              <a href="https://www.google.com">
                  <i class="fab fa-github fa-3x"></i>
              </a>
            </div> 
        </div>
 </div>

CSS: 

#socialIcons {
    position: relative;
    text-align: center;
    margin-top: 300px !important;
    border: 1px solid white;
    }

ОБНОВЛЕНИЕ: После применяя ответ Джеффа, это ближе к тому, что мне было нужно, но все еще имеет автоматическое заполнение c справа от значка GitHub. Есть идеи почему?

enter image description here

Ответы [ 3 ]

1 голос
/ 30 апреля 2020

Вы можете сделать что-то вроде этого (когда вы меняете свои иконки на мои span, это должно дать вам правильное заполнение сверху и снизу):

Codpen

Вместо жесткого кодирования text-align: center;, просто добавьте класс от text-center до Bootstrap. Также обратите внимание, что я добавил justify-content-center в строку. 

    <div class="container text-center" id="socialIcons">
      <div class="row justify-content-center">
       <div class="border">
         <a href="https://www.google.com">
           <span>google</span>
        </a>
        <a href="https://www.google.com">
          <span>youtube</span>
        </a>
        <a href="https://www.google.com">
          <span>fb</span>
        </a>
        <a href="https://www.google.com">
          <span>twitter</span>
        </a>
       </div>
     </div>
    </div>

и CSS: 

    #socialIcons {
      position: relative;
      margin-top: 300px !important;
    }

    .border {
     border: 1px solid black;
     padding: 1px;
    }
0 голосов
/ 30 апреля 2020 
<div class="container" id="socialIcons">
    <div class="row">
        <div class="col-md-12" style="border: 1px solid white;">
          <a href="https://www.google.com">
              <i class="fab fa-linkedin fa-3x "></i>
          </a>
          <a href="https://www.google.com" target="_blank">
              <i class="fab fa-youtube fa-3x"></i>
          </a>
          <a href="https://www.google.com">
              <i class="fab fa-instagram fa-3x"></i>
          </a>
          <a href="https://www.google.com">
              <i class="fab fa-github fa-3x"></i>
          </a>
        </div> 
    </div>

Надеюсь, приведенный выше код поможет вам

0 голосов
/ 30 апреля 2020

Если ваши иконки должны быть выровнены по центру - вам не нужно использовать элемент div с классом container. Просто добавьте упаковщик div с пользовательским классом и добавьте в него свои стили.

...