在行动中看到它

Question

您好我正在尝试为我的网站制作页脚我编写此代码并且一切正常但除了第二行位于第一行和屏幕底部的一半之外我需要第二行是在第一行的右边任何人都可以帮助谢谢！ 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>

Answer 1

您可以像这样使用$stateProvider .state('app', { abstract: true, views : { header: { template: "<p>My header</p>", controller: function () { alert("loaded main control"); } } } }) .state('app.home', { url: '', views: { 'section@': { template: "<p> My initial content here </p>", controller: function () { alert("loaded home control"); } } } })：

flex

在行动中看到它

.footer .container{
    display: flex;
    justify-content: space-between;
}

.footer{
  padding: 20px 0;
  background-color: #CDCDEF;
}
.footer .container{
  width: 70%;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
}
.footer .container .row ul{
  list-style: none;
}

Answer 2

我相信你正在使用bootstrap所以不需要花哨的CSS，这个html会为你做的。

但请注意，当屏幕小于x像素（我相信376px但不确定）时，两列会相互重叠。

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

将页脚内容放在列中

2 个答案:

在行动中看到它