在页面中输入页脚内容 [英] Put footer content in columns

查看:96
本文介绍了在页面中输入页脚内容的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

您好我目前正在为我的网站做一个页脚我写这个代码,一切正常,除了第二行在屏幕的第一行和底部的一半的事实,我需要第二行到第一行的右边可以任何人帮助感谢!
在此输入图片描述

Hello I am currently trying to make a footer for my website I write this code and everything works fine except the fact that the second row is under the first row and half of the bottom of the screen I need the second row to be to the right of the first row can anyone help thanks! enter image description here

<div class="footer">
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <h4>Links</h4>
                <li><a href="index.html">Home</a></li>
                <li><a href="courses.html">Courses</a></li>
                <li><a href="sign-up.html">Sign Up</a></li>
                <li><a href="log-in.html">Log In</a></li>
                <li><a href="help.html">Help</a></li>
            </div>

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

        <div class="row">
            <div class="col-md-6">
                <h4>Social Media</h4>
                <li><a href="#">Facebook</a></li>
                <li><a href="#">Twitter</a></li>
                <li><a href="#">Youtube</a></li>
                <li><a href="#">Instagram</a></li>
            </div>
        </div>
    </div>
</div>


推荐答案

我相信你使用的是bootstrap,所以没有必要

I believe you are using bootstrap so no need for fancy css, this html will do the trick for you.

但是请注意,当屏幕小于x像素(我相信376px但不确定)时,这两列将会

But be aware that when the screen is smaller that x pixels ( I believe 376px but not sure) the two columns will overlap each other.

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="footer">
    <div class="container">
        <div class="row">
            <div class="col-sm-6">
                <h4>Links</h4>
                <li><a href="index.html">Home</a></li>
                <li><a href="courses.html">Courses</a></li>
                <li><a href="sign-up.html">Sign Up</a></li>
                <li><a href="log-in.html">Log In</a></li>
                <li><a href="help.html">Help</a></li>
            </div>

            <div class="col-sm-6">
              <h4>Social Media</h4>
                <li><a href="#">Facebook</a></li>
                <li><a href="#">Twitter</a></li>
                <li><a href="#">Youtube</a></li>
                <li><a href="#">Instagram</a></li>
            </div>
        </div>
    </div>
</div>
</body>
</html>

这篇关于在页面中输入页脚内容的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆