Question

我是一名初学者，我正在学习使用bootstrap网格。虽然，我不太明白集装箱利润率如何运作。

我为网站页脚编写了这段代码并尝试使用bootstrap网格，但我希望社交图标大约是20px到右边，我无法得到它。检查谷歌浏览器中的元素我可以看到有一个边缘权利，但我似乎无法自定义它并使其更小。

看看 - 这是我的页脚的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中的预设类，用于将您的内容保存在适当的位置，并在不同大小的屏幕上具有适当的宽度。

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

而且，您在检查器中看到的“社交图标边缘”是填充或在引导程序css中预先设置在容器上的宽度。

Answer 2

首先，分别使用行和容器类。其次，你的cols应该等于12，如bootstrap网格系统中所述。第三，您还可以使用偏移列来增加左边距。示例如下：

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

这特别是将社交图标粘贴到页面底部而不管滚动。但它让你知道该怎么做。

更改引导网格边距

3 个答案: