bootstrap 多内容页脚

      <div class="container">
        <div class="row">

            <div class="col-sm-4 col-md-2">
              <h3>Categories</h3>
              <ul>
                <li><a href="#">Shoes</a></li>
                <li><a href="#">Clothing</a></li>
                <li><a href="#">Accessories</a></li>
                <li><a href="#">Men</a></li>
                <li><a href="#">Women</a></li>
                <li><a href="#">Kids</a></li>
                <li><a href="#">Pets</a></li>
              </ul>
            </div>
            <div class="col-sm-4 col-md-2">
              <h3>Styles</h3>
              <ul>
                <li><a href="#">Athletic</a>  </li>
                <li><a href="#">Casual</a></li>
                <li><a href="#">Dress</a></li>
                <li><a href="#">Everyday</a></li>
                <li><a href="#">Other Days</a></li>
                <li><a href="#">Alternative</a></li>
                <li><a href="#">Otherwise</a></li>
              </ul>
            </div>
            <div class="col-sm-4 col-md-2">
              <h3>Other</h3>
              <ul>
                <li><a href="#">Link</a></li>
                <li><a href="#">Another link</a></li>
                <li><a href="#">Link again</a></li>
                <li><a href="#">Try this</a></li>
                <li><a href="#">Don't you dare</a></li>
                <li><a href="#">Oh go ahead</a></li>
              </ul>
            </div>

          <!-- Add the extra clearfix for only the required viewport -->
          <div class="clearfix visible-sm"></div>

          <div class="about col-sm-12 col-md-6">
            <h3>About Us</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse euismod congue bibendum. Aliquam erat volutpat. Phasellus eget justo lacus. Vivamus pharetra ullamcorper massa, nec ultricies metus gravida egestas. Duis congue viverra arcu, ac aliquet turpis rutrum a. Donec semper vestibulum dapibus. Integer et sollicitudin metus. Vivamus at nisi turpis. Phasellus vel tellus id felis cursus hendrerit.</p>
            <p><a class="btn btn-default btn-xs pull-right" href="#">Learn more <span class="fa fa-arrow-circle-right"></span></a></p>
          </div>
        </div><!-- /.row -->

        <ul class="social">
          <li><a href="#" title="Twitter Profile"><span class="icon fa fa-twitter"></span></a></li>
          <li><a href="#" title="Facebook Page"><span class="icon fa fa-facebook"></span></a></li>
          <li><a href="#" title="LinkedIn Profile"><span class="icon fa fa-linkedin"></span></a></li>
          <li><a href="#" title="Google+ Profile"><span class="icon fa fa-google-plus"></span></a></li>
          <li><a href="#" title="GitHub Profile"><span class="icon fa fa-github-alt"></span></a></li>
        </ul>

        <p class="footer-brand"><a href="index.html"><img src="img/logo.png" width="80" alt="Bootstrappin'"></a></p>

      </div><!-- /.container -->
    </footer>