Question

我希望我的页脚能够在小屏幕上响应，但是当我缩小窗口宽度时，我的页脚第二类（.pull-right）会沿着定义的页脚高度向下移动。请指导我！

HTML：

<footer>
        <div class="container">
            <div class="row">
                <div class="col-xs-6 col-md-4 pull-left">
                    <h2>Stay in touch</h2>
                    <p>Got a website? you want me to work on<br>please, feel free to email me.</p>
                    <br>
                    <br>
                    <h4>Email</h4>
                    <p>aisha_salman3@outlook.com</p>
                </div>
                <div class="col-xs-6 col-md-4 pull-right">
                    <h2>Follow me</h2>
                    <p>Follow me on social media...</p>
                    <br>
                    <br>
                    <a href=""><img width="36" height="36" src="img/twitter.png"></a>
                    <a href=""><img width="36" height="36" src="img/linkedIn.png"></a>
                    <a href=""><img width="36" height="36" src="img/insta.png"></a>
                    <a href=""><img width="36" height="36" src="img/fb.png"></a>
                </div>
            </div>
            <div class="pull-bottom">
                <p>copyright &copy 2016 | Aisha Salman</p>
            </div>
        </div>
    </footer>

CSS：

footer {
    height: 400px;
    width: 100%;
    background-color: #181818;
    color: white;
}

.pull-left {
    float: left!important;
    margin: 40px;
}

.pull-left h2 {
    color: #8e8e8e;
}

.pull-left p {
    font-size: 17px;
    color: #6d6d6d;
}

.pull-left h4 {
    color: #8e8e8e;
}

.pull-right {
    float: right!important;
    margin: 40px;
}

.pull-right h2 {
    color: #8e8e8e;
}

.pull-right p {
    font-size: 16px;
    color: #6d6d6d;
}

.pull-bottom {
    text-align: center;
    color: #6d6d6d;
    position: relative;
    top: 50px;
}

截图：

Answer 1

.pull-right {
    float: right!important;
    margin: 40px;  // <== This margin causing your columns to drop in 2 lines.
}

您在margin: 40px;和.pull-left课程上.pull-right。因此，当在.col-xs-6上应用这些类时，它们会创建额外的空间并且您的列会丢失。删除它们或覆盖它们以使列正常工作。

注意：您不需要将pull-left应用于bootstrap中的列。默认情况下，它们的样式为float: left。

＆＃13;

footer {
    height: 400px;
    width: 100%;
    background-color: #181818;
    color: white;
}

.pull-left {
    float: left !important;
}

.pull-left h2 {
    color: #8e8e8e;
}

.pull-left p {
    font-size: 17px;
    color: #6d6d6d;
}

.pull-left h4 {
    color: #8e8e8e;
}

.pull-right {
    float: right !important;
}

.pull-right h2 {
    color: #8e8e8e;
}

.pull-right p {
    font-size: 16px;
    color: #6d6d6d;
}

.pull-bottom {
    text-align: center;
    color: #6d6d6d;
    position: relative;
    top: 50px;
}

@media all and (min-width: 992px) {
    .pull-left,
    .pull-right {
         margin: 40px;
    }
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<footer>
  <div class="container">
    <div class="row">
      <div class="col-xs-6 col-md-4">
        <h2>Stay in touch</h2>
        <p>Got a website? you want me to work on<br>please, feel free to email me.</p>
        <br>
        <br>
        <h4>Email</h4>
        <p>aisha_salman3@outlook.com</p>
      </div>
      <div class="col-xs-6 col-md-4 pull-right">
        <h2>Follow me</h2>
        <p>Follow me on social media...</p>
        <br>
        <br>
        <a href=""><img width="36" height="36" src="img/twitter.png"></a>
        <a href=""><img width="36" height="36" src="img/linkedIn.png"></a>
        <a href=""><img width="36" height="36" src="img/insta.png"></a>
        <a href=""><img width="36" height="36" src="img/fb.png"></a>
      </div>
    </div>
    <div class="pull-bottom">
      <p>copyright &copy 2016 | Aisha Salman</p>
    </div>
  </div>
</footer>

＆＃13;

Answer 2

不要使用pull-right，bootstrap为此目的具有偏移类http://getbootstrap.com/css/#grid-offsetting

试试这个：

<div class="col-xs-6 col-md-4"></div>
<div class="col-xs-offset-0 col-xs-6 col-md-offset-2 col-md-4"></div>

Answer 3

我添加了一些媒体查询

footer {
    height: 400px;
    width: 100%;
    background-color: #181818;
    color: white;
}

.pull-left {
    float: left!important;
    margin: 40px;
}

.pull-left h2 {
    color: #8e8e8e;
}

.pull-left p {
    font-size: 17px;
    color: #6d6d6d;
}

.pull-left h4 {
    color: #8e8e8e;
}

.pull-right {
    float: right!important;
    margin: 40px;
}

.pull-right h2 {
    color: #8e8e8e;
}

.pull-right p {
    font-size: 16px;
    color: #6d6d6d;
}

.pull-bottom {
    text-align: center;
    color: #6d6d6d;
    position: relative;
    top: 50px;
}
@media(max-width:1020px){
 .pull-left, .pull-right{
   margin: 0px;
 }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<footer>
  <div class="container">
    <div class="row">
      <div class="col-xs-6 col-md-4 pull-left">
        <h2>Stay in touch</h2>
        <p>Got a website? you want me to work on<br>please, feel free to email me.</p>
        <br>
        <br>
        <h4>Email</h4>
        <p>aisha_salman3@outlook.com</p>
      </div>
      <div class="col-xs-6 col-md-4 pull-right">
        <h2>Follow me</h2>
        <p>Follow me on social media...</p>
        <br>
        <br>
        <a href=""><img width="36" height="36" src="img/twitter.png"></a>
        <a href=""><img width="36" height="36" src="img/linkedIn.png"></a>
        <a href=""><img width="36" height="36" src="img/insta.png"></a>
        <a href=""><img width="36" height="36" src="img/fb.png"></a>
      </div>
    </div>
    <div class="pull-bottom">
      <p>copyright &copy 2016 | Aisha Salman</p>
    </div>
  </div>
</footer>

响应的页脚远低于定义的高度

3 个答案: