使用 Bootstrap 4 在小型设备上的页脚布局、响应和隐藏

Posted

技术标签:

【中文标题】使用 Bootstrap 4 在小型设备上的页脚布局、响应和隐藏【英文标题】：Footer layout, responsiveness and hiding on small devices with Bootstrap 4 【发布时间】：2021-02-20 18:59:27 【问题描述】：

这里是 Bootstrap 4 的新手。我试图让我的页脚符合与以下模型相同的布局：

到目前为止，我的最佳尝试如下：

index.html (sn-p)：

<!-- footer -->
<hr/>
<div class="container-fluid">
  <div class="row">
    <div class="col-sm">
      <span class="linklist-label">Foobar</span>
      <ul class="linklist">
        <li><a class="footer-link" href="">Fizz</a></li>
        <li><a class="footer-link" href="">Buzz</a></li>
        <li><a class="footer-link" href="">Foobar</a></li>
      </ul>
    </div>
    <div class="col-sm">
      <span class="linklist-label">Other Stuff</span>
      <ul class="linklist">
        <li><a class="footer-link" href="">Cool Links</a></li>
        <li><a class="footer-link" href="">What's New</a></li>
        <li><a class="footer-link" href="">Newsletter</a></li>
      </ul>
    </div>
    <div class="col-sm">
      <span class="linklist-label">Zoo Stuff</span>
      <ul class="linklist">
        <li><a class="footer-link" href="">Zebras</a></li>
        <li><a class="footer-link" href="">Rhinos</a></li>
        <li><a class="footer-link" href="">Monkeys</a></li>
      </ul>
    </div>
  </div>

  <div class="row">
    <div class="col-6">
      <img src="dummy-logo.png" class="img-fluid footer-logo" >
    </div>

    <div class="col-sm">
      <span class="linklist-label">Contact Us</span>
      <br/><span class="fas fa-phone" aria-hidden="true"></span> 800.555.5555
      <br/><span class="fas fa-envelope" aria-hidden="true"></span> <a href="mailto:info@example.com">info@example.com</a>
      <br/><span class="fas fa-map-marker-alt" aria-hidden="true"></span> 123 Testville Rd
      <br/>&nbsp;&nbsp;Testville, XY 12345
    </div>
  </div>
</div>

<div class="row">
  <div class="col-sm"><a href="" class="">Status</a></div>
  <div class="col-sm"><a href="" class="">Legal</a></div>
  <div class="col-sm"><a href="" class="">Privacy</a></div>
  <div class="col-sm"><a href="" class="">Terms</a></div>
</div>

ma​​in.css：

html, body 
    height: 100%;
    font-family: 'Lato';


.bordered 
    border-radius: 5px;
    border: 1px solid white;


.navbar 
    background-color: #00142E;


#navb ul 
    align-items: center;


.red-button 
    border-radius: 5px;
    border: 1px solid #A81E30;
    background-color: #A81E30;
    color: beige;


.mainlogo 
    height: 50px;


.footer-logo 
    height: 100px;


hr 
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);


.linklist 
    list-style-type: none;
    padding-left: 0;


.linklist-label 
    font-weight: bolder;
    color: #A81E30;


.linklist a.footer-link 
    color: #00142E;


.linklist a.footer-link:hover 
    color: gray;

当它在浏览器中运行时，我得到：

正如你所看到的，我有点在那里，但还有很长的路要走。就响应能力而言，我认为如果屏幕很小（移动设备等），我希望页脚（这里的所有内容）完全消失。

谁能发现我的布局/定位出错的地方，并帮助我实现我正在寻找的“在小屏幕上消失”功能？

【问题讨论】：

您希望页脚消失的屏幕尺寸是多少？ 320px、380px、414px、575px 或 767px 还是什么？ 【参考方案1】： 

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>


<footer class="d-none d-sm-block">
  <div class="container-fluid">
    <div class="row my-2">
      <div class="col-4">
        <div class="footer-col py-5 bg-success">
          <p class="text-white text-center">Title & list items</p>
        </div>
      </div>
      <div class="col-4">
        <div class="footer-col py-5 bg-success">
          <p class="text-white text-center">Title & list items</p>
        </div>
      </div>
      <div class="col-4">
        <div class="footer-col py-5 bg-success">
          <p class="text-white text-center">Title & list items</p>
        </div>
      </div>
    </div>
    <div class="row my-3">
      <div class="col-8">
        <div class="footer-col">
          <figure class="py-5 bg-info">
            <p class="text-white text-center">The image</p>
          </figure>
          <ul class="nav justify-content-around py-1 bg-primary">
            <p class="text-white text-center">Footer nav</p>
          </ul>  
        </div>
      </div>
      <div class="col-4">
        <div class="footer-col py-5 bg-success">
          <p class="text-white text-center">Title & list items</p>
        </div>
      </div>
    </div>
  </div>
</footer>

【讨论】：

【参考方案2】： 

.mainlogo 
  height: 50px;


.footer-logo 
  height: 100px;


hr 
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);


.linklist 
  list-style-type: none;
  padding-left: 0;


.linklist-label 
  font-weight: bolder;
  color: #A81E30;


.linklist a.footer-link 
  color: #00142E;


.linklist a.footer-link:hover 
  color: gray;


#myLogo 
  width: 360px;
  height: 58px;
  border: 1px solid red;

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
        integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<hr>        
<div class="container-fluid d-none d-sm-block">
    <div class="row">
        <div class="col-sm-8">
            <div class="row">
                <div class="col-sm-6">
                    <span class="linklist-label">Foobar</span>
                    <ul class="linklist">
                        <li><a class="footer-link" href="">Fizz</a></li>
                        <li><a class="footer-link" href="">Buzz</a></li>
                        <li><a class="footer-link" href="">Foobar</a></li>
                    </ul>
                </div>
                <div class="col-sm-6">
                    <span class="linklist-label">Other Stuff</span>
                    <ul class="linklist">
                        <li><a class="footer-link" href="">Cool Links</a></li>
                        <li><a class="footer-link" href="">What's New</a></li>
                        <li><a class="footer-link" href="">Newsletter</a></li>
                    </ul>
                </div>

                <div class="col-sm-12">
                    <img src="dummy-logo.png" class="img-fluid footer-logo"  id="myLogo">
                </div>
                <div class="col-sm-12">                
                    <div class="row">
                        <div class="col-sm-3"><a href="" class="">Status</a></div>
                        <div class="col-sm-3"><a href="" class="">Legal</a></div>
                        <div class="col-sm-3"><a href="" class="">Privacy</a></div>
                        <div class="col-sm-3"><a href="" class="">Terms</a></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <span class="linklist-label">Zoo Stuff</span>
            <ul class="linklist">
                <li><a class="footer-link" href="">Zebras</a></li>
                <li><a class="footer-link" href="">Rhinos</a></li>
                <li><a class="footer-link" href="">Monkeys</a></li>
            </ul>

            <span class="linklist-label">Contact Us</span>
            <br/><span class="fas fa-phone" aria-hidden="true"></span> 800.555.5555
            <br/><span class="fas fa-envelope" aria-hidden="true"></span> <a href="mailto:info@example.com">info@example.com</a>
            <br/><span class="fas fa-map-marker-alt" aria-hidden="true"></span> 123 Testville Rd
            <br/>&nbsp;&nbsp;Testville, XY 12345
        </div>
    </div>
  </div>

为了使您的页脚在某些设备上消失，您需要提及要显示的屏幕的最大和最小尺寸。

@media only screen and (max-width: 767px) and (min-width: 480px) 
 .footer display: none !important;

【讨论】：

【参考方案3】：

您可以像这样嵌套行和列：

html, body 
    height: 100%;
    font-family: 'Lato';


.bordered 
    border-radius: 5px;
    border: 1px solid white;


.navbar 
    background-color: #00142E;


#navb ul 
    align-items: center;


.red-button 
    border-radius: 5px;
    border: 1px solid #A81E30;
    background-color: #A81E30;
    color: beige;


.mainlogo 
    height: 50px;


.footer-logo 
    height: 100px;


hr 
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);


.linklist 
    list-style-type: none;
    padding-left: 0;


.linklist-label 
    font-weight: bolder;
    color: #A81E30;


.linklist a.footer-link 
    color: #00142E;


.linklist a.footer-link:hover 
    color: gray;


    #myLogo  display: block; width: 360px; height: 58px; border: 1px solid red; margin: 1em auto;
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
        integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<hr>        
<div class="container-fluid d-none d-sm-block">
    <div class="row">
        <div class="col-sm-8">
            <div class="row">
                <div class="col-sm-6">
                    <span class="linklist-label">Foobar</span>
                    <ul class="linklist">
                        <li><a class="footer-link" href="">Fizz</a></li>
                        <li><a class="footer-link" href="">Buzz</a></li>
                        <li><a class="footer-link" href="">Foobar</a></li>
                    </ul>
                </div>
                <div class="col-sm-6">
                    <span class="linklist-label">Other Stuff</span>
                    <ul class="linklist">
                        <li><a class="footer-link" href="">Cool Links</a></li>
                        <li><a class="footer-link" href="">What's New</a></li>
                        <li><a class="footer-link" href="">Newsletter</a></li>
                    </ul>
                </div>

                <div class="col-sm-12">
                    <img src="dummy-logo.png" class="img-fluid footer-logo"  id="myLogo">
                </div>
                <div class="col-sm-12">                
                    <div class="row">
                        <div class="col-sm-3"><a href="" class="">Status</a></div>
                        <div class="col-sm-3"><a href="" class="">Legal</a></div>
                        <div class="col-sm-3"><a href="" class="">Privacy</a></div>
                        <div class="col-sm-3"><a href="" class="">Terms</a></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <span class="linklist-label">Zoo Stuff</span>
            <ul class="linklist">
                <li><a class="footer-link" href="">Zebras</a></li>
                <li><a class="footer-link" href="">Rhinos</a></li>
                <li><a class="footer-link" href="">Monkeys</a></li>
            </ul>

            <span class="linklist-label">Contact Us</span>
            <br/><span class="fas fa-phone" aria-hidden="true"></span> 800.555.5555
            <br/><span class="fas fa-envelope" aria-hidden="true"></span> <a href="mailto:info@example.com">info@example.com</a>
            <br/><span class="fas fa-map-marker-alt" aria-hidden="true"></span> 123 Testville Rd
            <br/>&nbsp;&nbsp;Testville, XY 12345
        </div>
    </div>
  </div>

注意事项：：

此标记完全适合 bootstrap 3x 和 4x（未尝试过 5）。 在此处阅读有关网格系统的更多信息：boots4、boots3。

唯一不同的是类组合 d-none.d-sm-block 替换引导程序 3 的 hidden-xs：此类将根据框架 @media 规则在小型设备上隐藏元素。 阅读更多关于显示内容的帮助类here。

【讨论】：

以上是关于使用 Bootstrap 4 在小型设备上的页脚布局、响应和隐藏的主要内容，如果未能解决你的问题，请参考以下文章

Bootstrap 4 - 粘性页脚 - 动态页脚高度

Bootstrap 页脚列堆叠和丢失页脚颜色

为啥我的页脚宽度没有达到智能手机上的全宽？我正在使用 WordPress

DIV 底部的页脚而不是页面底部。引导程序

ListView WPF上的页脚

如何修复 Bootstrap 使其不会弄乱登录表单和页脚？