Question

如何让我的页脚响应？问题：当屏幕缩小到1200px以下时，右侧的列（页脚右侧）开始被切断，中间列形成输入区域缩小得太小。当它到达左边第一列下方的大约750px的中间和左列时，这是他们应该做的，但中间形式的输入字段只有大约1px宽;并且正确的形式偏移太远而不是偏向中间。左侧响应的第一列是正常工作，而不是其他两个（中间和最右侧）

非常感谢帮助！

self.removeItem = function(item) {
    if (item.quantity > 1) {
      var cartItem = self.items().filter(function(element) {
        return element.Id == item.Id;
      })[0];
      cartItem.quantity--;
      self.items.valueHasMutated();
    } else {
      self.items.remove(item);
    }
    app.saveCart();
  }.bind(self);

CSS

<footer class="footer-distributed">
<div class="row">
<div class="footer-left col-sm-3 col-xs-12">
<h3>text</h3>
<p class="footer-links">
<a href="index.html">Home</a>
                ·
<a href="about.html">About us</a>
                ·
<a href="products.html">Products</a>
                ·
<a href="support.html">Support</a>
                ·
<a href="contact.html">Contact</a>
</p>

<h3>Text</h3>

<p class="footer-links">
<a href="text.html">text</a>
                ·
<a href="text.html">text</a>
                ·
<a href="text.html">text</a>
                ·
<a href="text.html">text</a>

</p>



<p class="footer-company-name"> <a href="http://www.home.com">text</a><span> &copy; text</span></p>


<div class="footer-social">


<ul class="social">
<li>
<a href="https://www.facebook.com/text/" class="Facebook">
<i class="ion-social-facebook"></i>
</a>
</li>
<li>
<a href="https://twitter.com/text" class="Twitter">
<i class="ion-social-twitter"></i>
</a>
</li>
<li>
<a href="https://www.linkedin.com/company/text" class="Linkedin">
<i class="ion-social-linkedin"></i>
</a>
</li>
<li>
<a href="https://text" class="Google Plus">
<i class="ion-social-googleplus"></i>
</a>
</li>
<li>
<a href="https://www.youtube.com/text" class="youtube">
<i class="ion-social-youtube"></i>
</a>
</li>
</ul>
</div>
</div>

<div class="col-md-6 col-sm-6 col-xs-12">
<div class="form-sub subscribe section-wrapper">
<p class="subscribe-parafoot">
        Sign up for our newsletter
</p>
<p class="subscribe-nowfoot">
        text
</p>
<div class="col-md-8 col-sm-8 col-xs-3 col-sm-push-2">
<form action="" method="post" id="subscribe1">
<div class="input-group">
<input type="email" name="email" class="form-control border-radius" placeholder="Email address">
<span class="input-group-btn">
<button class="btn border-radius contactfoot-btn" type="submit">Sign up</button>
</span>
</div>
</form>               
</div>
</div>
</div>

<div class="footer-right col-sm-3 col-xs-8">
<p>Contact Us</p>
<form action="#" method="post" id="contactForm">
<input type="text" name="email" placeholder="Email" />
<textarea name="message" placeholder="Message"></textarea>
<button>Send</button>
</form>
</div>
</div>
</footer>

媒体查询 @media only screen and（max-width：767px）{ #footer .copyright { text-align：center; } #footer .social { text-align：center; } }

Answer 1

如果你想拥有一个完全响应的页脚，你不会想要对页脚内部元素（或页脚本身）的任何宽度进行硬编码。我看到下面的CSS选择器的宽度属性为280px：

footer-distributed .footer-right form input,
.footer-distributed .footer-right form textarea {...
  width: 280px;
...}

我导致相信这个属性会在调整屏幕大小时使该字段顽固。

由于您正在使用媒体查询，尝试查找适用于textarea和输入的百分比，然后在屏幕上调整该百分比调整大小。这样它仍然会有一个断点，但直到那时它的行为都是动态的。

希望这会有所帮助。塞巴斯蒂安

如何让页脚中的页脚和列和表单正确响应

1 个答案: