用于超小屏幕尺寸设备的引导程序列

Question

I am trying to make a responsive columns using bootstrap. In desktop and large screen sizes it should have 4 columns. In Tab viewpots it should have 3 columns and in extra small viewports it should be 2 columns.

This is my Markup -

 <nav class="page-footer-nav row"> <div class="footer-nav-section col-xs-6 col-sm-4 col-md-3"> <a href="">Menu Item</a> <a href="">Sub Menu Item</a> <a href="">Sub Menu Item</a> <a href="">Sub Menu Item</a> <a href="">Sub Menu Item</a> <a href="">Sub Menu Item</a> </div> <div class="footer-nav-section col-xs-6 col-sm-4 col-md-3"> <a href="">Menu Item</a> <a href="">Sub Menu Item</a> <a href="">Sub Menu Item</a> <a href="">Sub Menu Item</a> <a href="">Sub Menu Item</a> </div> <div class="footer-nav-section col-xs-6 col-sm-4 col-md-3"> <a href="">Menu Item</a> <a href="">Sub Menu Item</a> <a href="">Sub Menu Item</a> <a href="">Sub Menu Item</a> <a href="">Sub Menu Item</a> <a href="">Sub Menu Item</a> </div> <div class="footer-nav-section col-xs-6 col-sm-4 col-md-3"> <a href="">Menu Item</a> <a href="">Sub Menu Item</a> <a href="">Sub Menu Item</a> <a href="">Sub Menu Item</a> <a href="">Sub Menu Item</a> </div> </nav> 

This markup working properly in small, desktop and large screen sizes. But it has a mess in extra small size. Check this JSBIN for better understanding.

This is a screen shot in xs device size-

Answer 1

Clear floats (with the .clearfix class) at specific breakpoints to prevent strange wrapping with uneven content:

In the Bootstrap documentation for the grid system they advise you to add a new div in between the columns to help it understand where the columns should clear. The div should have a clearfix class so the columns clear to the left and one of the helper classes so you can target a specific viewport.

LIVE DEMO

and add this between the two parts :

• you need to add a clearfix <div class="clearfix visible-xs "></div> to avoid this issue in xs devises

Like so :

<nav class="page-footer-nav row">
      <div class="footer-nav-section col-xs-6 col-sm-4 col-md-3">
        <a href="">Menu Item</a>
        <a href="">Sub Menu Item</a>
        <a href="">Sub Menu Item</a>
        <a href="">Sub Menu Item</a>
        <a href="">Sub Menu Item</a>
        <a href="">Sub Menu Item</a>
      </div>
      <div class="footer-nav-section col-xs-6 col-sm-4 col-md-3">
        <a href="">Menu Item</a>
        <a href="">Sub Menu Item</a>
        <a href="">Sub Menu Item</a>
        <a href="">Sub Menu Item</a>
        <a href="">Sub Menu Item</a>
      </div>

    <div class="clearfix visible-xs"></div> // < --- add this to fix the issue

      <div class="footer-nav-section col-xs-6 col-sm-4 col-md-3 ">
        <a href="">Menu Item</a>
        <a href="">Sub Menu Item</a>
        <a href="">Sub Menu Item</a>
        <a href="">Sub Menu Item</a>
        <a href="">Sub Menu Item</a>
        <a href="">Sub Menu Item</a>
      </div>
      <div class="footer-nav-section col-xs-6 col-sm-4 col-md-3 ">
        <a href="">Menu Item</a>
        <a href="">Sub Menu Item</a>
        <a href="">Sub Menu Item</a>
        <a href="">Sub Menu Item</a>
        <a href="">Sub Menu Item</a>
      </div>
    </nav>

Answer 2

 $('.page-footer-nav').each(function() { $(this).children('.footer-nav-section').matchHeight(); }); 

 <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.5.2/jquery.matchHeight-min.js"></script> 

 <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.5.2/jquery.matchHeight-min.js"></script> <nav class="page-footer-nav row"> <div class="footer-nav-section col-xs-6 col-sm-4 col-md-3"> <a href="">Menu Item</a> <a href="">Sub Menu Item</a> <a href="">Sub Menu Item</a> <a href="">Sub Menu Item</a> <a href="">Sub Menu Item</a> <a href="">Sub Menu Item</a> </div> <div class="footer-nav-section col-xs-6 col-sm-4 col-md-3"> <a href="">Menu Item</a> <a href="">Sub Menu Item</a> <a href="">Sub Menu Item</a> <a href="">Sub Menu Item</a> <a href="">Sub Menu Item</a> </div> <div class="footer-nav-section col-xs-6 col-sm-4 col-md-3"> <a href="">Menu Item</a> <a href="">Sub Menu Item</a> <a href="">Sub Menu Item</a> <a href="">Sub Menu Item</a> <a href="">Sub Menu Item</a> <a href="">Sub Menu Item</a> </div> <div class="footer-nav-section col-xs-6 col-sm-4 col-md-3"> <a href="">Menu Item</a> <a href="">Sub Menu Item</a> <a href="">Sub Menu Item</a> <a href="">Sub Menu Item</a> <a href="">Sub Menu Item</a> </div> </nav> 

Your problem is a content inside the footer-nav-section. The problem is height of the div. You need to make all div's equal height.

Use matchheight.js

and the function is,

  $('.page-footer-nav').each(function() {
$(this).children('.footer-nav-section').matchHeight();

});