Question

这是what I'm trying to do，在两条粉红线之间是我的最大宽度。这is what I'm getting:

我越来越近了：

这是我的HTML：

<footer>
    <div class="container">
        <div class="row">
            <div class="col-sm-6">
            <h7>GET SOCIAL WITH US!</h7>
                <div class="container'>
                <div class="row">
                    <div class="col-md-2">
                        <a href="https://www.facebook.com/Link"><img src="img/FB_LINK.png" alt="Follow us on Facebook"></a></div>   
                        <div class="col-md-2">
                        <a href="https://twitter.com/LINK"><img src="img/TWITTER_LINK.png" alt="Follow us on Twitter"></a></div>
                        <div class="col-md-2">
                        <a href="https://www.linkedin.com/company/LINK"><img src="img/LINKEDIN_LINK.png" alt="Link In with Us"></a></div>

                    </div>
                    <div class="row">
                        <div class="col-sm-6"><h7>© 2016 COPYRIGHT LINE</h7></div>
                </div>
    </div>
</div>       

</footer>

这是本节的CSS：

footer {
height: 60px;
width: 100%;
font-size: 14px;
position: absolute;
background-color: #2A3E47;
font-family: 'Contrail One', cursive;
margin: 0px 10px 0px 10px;
    text-align:center;
}

footer.a{
display:inline-block;
 margin:0 auto 0 auto;
}

h7{
color:#FFF;
font-size:24px;
font-family: 'Contrail One', cursive;
text-align:center;
}

我似乎无法弄清楚这一点，我已经在几张纸上画了出来，但我的风格似乎就像我喜欢的那样。谁能指出我哪里出错？

Answer 1

看起来你的第二个col-sm-6嵌套得太深了。它应该与另一个相同，而不是在其中。你的div都坐在网格的一半（6宽），然后三个社交标识占了一半，版权位是另一半。你需要col-sm-6 div作为兄弟姐妹。

此外，我不认为col-sm-6看起来像是在工作，看着你正在努力实现的目标。您可能想要制作第一组col-sm-3左右，并在版权部分添加偏移类。： - ）

Answer 2

HTML标记中至少有3个错误：

<h7>GET SOCIAL WITH US!</h7> <div class="container'>

结尾引用应为双（"），而不是单引号（'）
由于您将其放在列中，因此该标记的类名称应为container-fluid，而不是container

</div> <div class="row"> <div class="col-sm-6">

缺少关闭代码，div .row不是必需的。

</div> </div> </div> <div class="col-sm-6">

请参阅固定代码here

Answer 3

在尝试发布的代码后，我发现您使用了错误的引用对。你给出的css也不是为了达到目标而设计的。

我做了一个工作小提琴here。看看

HTML：

<footer>
  <div class="container">
    <div class="row">
      <div class="col-md-6 parent">
        <p>GET SOCIAL WITH US!</p>
        <div class="icon">
        <a href="https://www.facebook.com/Link"><img src="https://myapnea.org/assets/myapnea/icons/facebook_icon-7eedcb8837293505e1d3b1494ff19c9c3842340d1dfcd193e098e2b44f34456b.png" alt="Follow us on Facebook"></a>
        <a href="https://twitter.com/LINK"><img src="http://frcgamesense.com/dnn/portals/0/Home/Twitter_icon.png" alt="Follow us on Twitter"></a>
        <a href="https://www.linkedin.com/company/LINK"><img src="https://store-images.s-microsoft.com/image/apps.36749.9007199266245564.6701eae8-16d2-4ba0-bdaa-8d9d9f9a1e70.03e5f6a9-3866-4ad9-9f2b-6b57ff90419e?w=100&h=100&q=60" alt="Link In with Us"></a></div>
      </div>
      <div class="col-md-6">
        <p class="copyright">&copy; 2016 COPYRIGHT LINE</p>
      </div>
    </div>
  </div>
</footer>

CSS：

footer {
  padding: 5px;
height: 100px;
width: 100%;
font-size: 14px;
position: absolute;
background-color: #2A3E47;
font-family: 'Contrail One', cursive;
margin: 0px 10px 0px 10px;
    text-align:center;
}

.copyright {
  padding-top: 40px;
}

footer p {
  color: #fff;
}

footer a img {
  display: inline-block;
  width:50px;
}

.parent .icon {
  margin: auto 7px;
}

我不能在这个页脚的col

3 个答案: