html - 更改 bootstrap 网格边距

Question

我是一名编码初学者，正在学习使用 Bootstrap 网格。虽然，我不太明白容器边距是如何工作的。

我为网站页脚编写了这段代码，并尝试使用 Bootstrap 网格，但我希望社交图标向右移动大约 20 像素，但我无法获得它。在谷歌浏览器中检查元素，我可以看到右边有一个边距，但我似乎无法自定义它并使其变小。

看看 - 这是我的页脚的 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

无论滚动如何，这尤其会将社交图标粘在页面底部。但它会让您知道该怎么做。