Изменение полей загрузочной сетки

Question

Я начинаю кодер, и я учусь использовать сетку бутстрапа. Хотя, я не совсем понял, как работают поля контейнера.

Я написал этот фрагмент кода для нижнего колонтитула веб-сайта и попытался использовать загрузочную сетку, но я хотел, чтобы социальные значки были примерно 20 пикселей справа, и я не могу их получить. Проверяя элемент на google chrome, я вижу, что есть правая маржа, но я не могу ее настроить и уменьшить.

посмотрите - это HTML код моего нижнего колонтитула в:

<footer> 
     <div class="row container"> 
      <div class="logo-rodape col-md-2"> 
       <img src="img/logo-principal-white-gota.png" alt="Logo Picada Zero"> 
      </div> 

      <div class="r-content col-md-4"> 
       <p class="slogan-title">CLEAN AND PROTECTION</p> 
       <p class="slogan-sub">Proteção e limpeza para sua família</p> 
      </div> 

      <div class="r-social col-md-5"> 
       <a href="www.facebook.com"><i class="fa fa-facebook fa-2x" aria-hidden="true" style="color:#fff"></i></a> 

       <a href="www.vimeo.com"><i class="fa fa-vimeo fa-2x" aria-hidden="true" style="color:#fff"></i></a> 
      </div> 
     </div> 

    </footer> 

Теперь это мой CSS код:

footer{ 
background: url(../img/rodape-background.png); 
clear: both; 
padding: 50px 0; 
} 

footer .container{ 
position: relative; 
margin-left: 80px; 
box-sizing: border-box; 
margin-top: 50px; 
} 

.logo-rodape { 
padding: 0; 
margin: 0 auto; 
box-sizing: border-box; 
display: inline-block; 
} 

.r-content { 
padding: 0; 
box-sizing: border-box; 
display: inline-block; 
text-align: left; 
margin-left: 30px; 
margin-top: 20px; 
} 


.slogan-title { 
font-family: "avenir next condensed"; 
font-size: 0.3em; 
font-size: calc(0.3em + 1vw); 
@include screen-above(800px) { 
    font-size: 0.4em; 
} 
font-weight: 600; 
letter-spacing: 1.5px; 
margin-bottom: -2px; 
color: #fff; 
} 

.slogan-sub { 
font-family: 'Lato', sans-serif; 
font-size: 0.2em; 
font-size: calc(0.2em + 1vw); 
@include screen-above(800px) { 
    font-size: 0.3em; 
} 
font-weight: 300; 
letter-spacing: 1px; 
color: #fff; 
} 

.r-social { 
text-align: right; 
box-sizing: border-box; 
display: inline-block; 
margin-top: 40px; 
margin-left: 60px; 
} 

.fa-facebook { 
padding-right: 20px; 
} 

a i.fa:hover { 
color: #57cdf7; !important; 
} 

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

Спасибо!

Answer 1

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

Вы бы побеседовали с сеткой Bootstrap, чтобы переопределить .container, как и вы, и есть проблемы, которые идут вместе с этим (как вы видели).

Лучше всего создать совершенно отдельный компонент, который вы можете перемещать туда, где хотите, независимо от сетки Bootstrap.

HTML

<div class="social-icons"> 
    <ul> 
    <li>Social Icon</li> 
    <li>Another Icon</li> 
    </ul> 
</div> 

CSS

.social-icons { 
    position: fixed; 
    bottom: -10px; 
    right: -5px; 
} 

ul { 
    list-style: none; 
} 

.social-icons li { 
    display: inline; 
    padding-right: 30px; 
    padding-bottom: 20px; 
    width: 100px; 
} 

CodePen

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

Answer 2

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

<div class="container"> 
<footer> 
     <div class="row"> 
      <div class="logo-rodape col-md-2"> 
       <img src="img/logo-principal-white-gota.png" alt="Logo Picada Zero"> 
      </div> 

      <div class="r-content col-md-4"> 
       <p class="slogan-title">CLEAN AND PROTECTION</p> 
       <p class="slogan-sub">Proteção e limpeza para sua família</p> 
      </div> 

      <div class="r-social col-md-6"> 
       <a href="www.facebook.com"><i class="fa fa-facebook fa-2x" aria-hidden="true" style="color:#fff"></i></a> 

       <a href="www.vimeo.com"><i class="fa fa-vimeo fa-2x" aria-hidden="true" style="color:#fff"></i></a> 
      </div> 
     </div> 
    </footer> 
</div> <!--end container--> 

Кроме того, смещ_по_столбцам должна равняться 12. COL-MD-2 + Col-мкр-4 + цвет-MD-6 = кол-мкр-12. col-md-12 - это полная ширина страницы.

Вот хорошее чтение для вас: http://getbootstrap.com/css/

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

Answer 3

Во-первых, используйте класс и контейнер класса Отдельно. Во-вторых, ваши cols должны быть равны 12, как описано в системе сетки начальной загрузки. В-третьих, вы также можете использовать компенсирующие столбцы, которые увеличивают левое поле. Ниже приведен пример

<!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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css"></script> 

    </head> 
     <footer> 
<div class="container "> 
      <div class="row "> 
       <div class="col-md-2"> 
        <img src="img/logo-principal-white-gota.png" alt="Logo Picada Zero"> 
       </div> 

       <div class=" col-md-4"> 
        <p class="slogan-title">CLEAN AND PROTECTION</p> 
        <p class="slogan-sub">Proteção e limpeza para sua família</p> 
       </div> 

       <div class=" col-md-3 col-md-offset-3"> 
        <a href="www.facebook.com"><i class="fa fa-home fa-2x" aria-hidden="true" ></i></a> 

        <a href="www.vimeo.com"><i class="fa fa-vimeo fa-2x" aria-hidden="true"></i></a> 

       </div> 
      </div> 
    </div> 
     </footer>