【问题标题】:how to make it responsive please ? bootstrap - css -html请问如何让它响应?引导程序 - css -html
【发布时间】:2018-08-12 07:29:10
【问题描述】:

我在一个投资组合网站上工作,我的代码有一个错误,我想把页脚放在卡片定价下。谢谢。 https://i.stack.imgur.com/qYMvd.jpg

HTML: 页脚部分:

<footer class="footerP">
    <div class="container-fluid">
        <div class="row">
            <div class="small-footer col-12 col-lg-12">
                <div class="footer-title col-12 col-lg-6">
                    <h3>PASTEUR SERVICE STATION</h3>
                </div>
                <div class="footer-social hidden-md-down col-lg-6 text-right">
                    <ul id="menu">
                        <li>
                            <a href="#">
                                <i class="fab fa-facebook"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="fab fa-twitter"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="fab fa-google-plus-g"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="fab fa-instagram"></i>
                            </a>
                        </li>
                    </ul>
                </div>
        </div>
        <div class="big-footer">

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

CSS 卡:

.card{
max-width: 300px;
height: auto;
border-radius: 15px;
padding: 40px 20px;
margin: 0 auto;
box-shadow: 0 10px 15px rgba(0, 0, 0, .4);
transition: .5s;
overflow: hidden;

}

页脚 CSS:

.footerP .small-footer{
width: 100%;
height: 40px;
background: #232323;

}

谢谢大家的帮助。

【问题讨论】:

  • 也发布html

标签: css html bootstrap-4 footer responsive


【解决方案1】:

将整个内容包装在一个页脚标签中,并指定一个“页脚”类(Bootstrap 默认类)。

<footer class="footer">
  <div class="container-fluid">
   <!--Rest of your code --!>

默认的 Bootstrap .footer 将保持其全宽并粘在页面底部。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2014-03-14
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-02-14
    • 2019-02-12
    • 1970-01-01
    相关资源
    最近更新 更多