更改 bootstrap 网格边距

Question

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

我为网站页脚编写了这段代码，并尝试使用 bootstrap 网格，但我希望社交图标位于右侧约 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

首先，您应该将整个内容包装在容器中。容器在 bootstrap 中预先设置 class 以在不同尺寸的屏幕上以适当的宽度将您的内容保存在适当的位置。

<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-->

此外，cols 应等于 12。col-md-2 + col-md-4 + col-md-6 = col-md-12。 col-md-12 是页面的全宽。

这里有一个很好的读物：http://getbootstrap.com/css/

并且，您在检查器 "margin right by social icons" 中看到的是填充或在 bootstrap css 中预先设置在容器上的宽度。

Answer 2

首先，行和容器Class分开使用。其次，您的 cols 应等于 bootstrap 网格系统中所述的 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>

Answer 3

我假设你的问题意味着你希望社交图标位于屏幕的 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

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

更改 bootstrap 网格边距

Changing bootstrap grid margins

html

css

grid

margin

twitter-bootstrap