Question

我开始使我的HTML代码响应，但我面临白色问题，例如我的页脚有一个背景白色4列，我认为问题是我使用了背景作为我的页脚，但我不知道如何让它响应。

＆＃13;

       h4 {


         font-size: 16px !important;


         font-family: 'Open Sans', sans-serif;


         font-weight: bold;


         color: white;


       }


       .font-icon {


         float: left;


         color: white !important;


         padding: 0 15px 0 0;


         font-size: 25px !important;


       }


       .font-icon:hover {


         color: #80878e !important;


       }


       .footercol p {


         color: white;


       }


       .footercol:nth-child(2) span {


         display: block;


       }


       .footercol {


         float: left;


       }


       .footercol li,


       .footercol span,


       .footercol a {


         color: #80878e;


         font-size: 12px;


         font-family: arial;


         line-height: 2.5;


       }


       .footercol h4 {


         padding: 0 0 20px;


         color: white;


         font-family: 'Open Sans';


         font-size: 16px !important;


         font-weight: bold;


       }


       .footercol li {


         color: white;


         margin: 0 0 0 15px;


       }


       .footercol a {


         text-decoration: none;


       }


       .footercol a:hover {


         color: white;


       }

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="footer container-fluid">
  <div class="container">
    <div class="row">
      <div class="footercol col-lg-3 col-md-4 col-xs-4 col-sm-4">
        <h4>FOLLOW US</h4>
        <div>
          <span class="icon-facebook font-icon"></span>
          <span class="icon-google-plus font-icon"></span>
          <span class="icon-rss font-icon"></span>
          <span class="icon-social-pinterest font-icon"></span>
          <span class="icon-linkedin font-icon"></span>
        </div>
      </div>
      <div class="footercol col-lg-3 col-md-4 col-xs-4 col-sm-4">
        <h4>ADDRESS</h4>
        <span>9870 St Vincent Place,</span>
        <span>Glasgow, DC 45 Fr 45.</span>
        <span>Freephone:  +1 800 559 6580</span>
        <a href="#">mail@demolink.org</a>
      </div>
      <div class="footercol col-lg-3 col-md-4 col-xs-4 col-sm-4">
        <h4>SUPPORT MENU</h4>
        <ul>
          <li><a href="#">Lost Password?</a>
          </li>
          <li><a href="#">Forgot your Username?</a>
          </li>
          <li><a href="#">Your Membership</a>
          </li>
          <li><a href="#">Your Account</a>
          </li>
          <li><a href="#">Support Forum</a>
          </li>
        </ul>
      </div>
      <div class="footercol col-lg-3 col-md-4 col-xs-4 col-sm-4">
        <h4>ABOUT US</h4>
        <ul>
          <li><a href="#">Customer focus</a>
          </li>
          <li><a href="#">Performance</a>
          </li>
          <li><a href="#">Affiliates</a>
          </li>
          <li><a href="#">CV Review</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 1

编辑：您的第一个问题是您在基于12 col的网格上使用了包含col-sm-4的四个div。 4 * 4 = 16.如果我没有弄错的话，当屏幕尺寸小于992px宽时，这会使你的最后一个div“跳下”。

为了使事情正确，您需要了解Bootstrap基于12列网格。例如; 的 HTML /标记：

<div class="container my-footer"> <div class="row"> <div class="col-md-3 col-sm-3 col-xs-12"> <h4>Address:</h4> <ul> <li>Footer stuff</li> <li>Footer stuff</li> <li>Footer stuff</li> </ul> </div> <div class="col-md-3 col-sm-3 col-xs-12"> <h4>Projects:</h4> <ul> <li>Footer stuff</li> <li>Footer stuff</li> <li>Footer stuff</li> </ul> </div> <div class="col-md-3 col-sm-3 col-xs-12"> <h4>About us:</h4> <ul> <li>Footer stuff</li> <li>Footer stuff</li> <li>Footer stuff</li> </ul> </div> <div class="col-md-3 col-sm-3 col-xs-12"> <h4>Contact:</h4> <ul> <li>Footer stuff</li> <li>Footer stuff</li> <li>Footer stuff</li> </ul> </div> </div> </div>

我做错响应的错误是什么？

1 个答案: