Question

我正在尝试使用bootstrap创建响应列。在桌面和大屏幕尺寸中，它应该有4列。在Tab视图中它应该有3列，在超小视口中它应该是2列。

这是我的标记 -

＆＃13;

<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>

＆＃13;

此标记适用于小型，桌面和大屏幕尺寸。但是它的体积非常小。请查看此JSBIN以获得更好的理解。

这是以xs设备大小拍摄的屏幕截图 -

enter image description here

Answer 1

在特定断点处清除浮点数（使用.clearfix类）防止内容不均匀的奇怪包装：

在网格系统的 Bootstrap documentation 中，他们建议您在列之间添加新div，以帮助它了解列应清除的位置。 div应该有一个clearfix类，所以列清除左侧和一个辅助类，以便您可以定位特定的视口。

LIVE DEMO

并在两部分之间添加：

您需要添加clearfix <div class="clearfix visible-xs "></div>以避免在xs设备中出现此问题

像这样：

<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

＆＃13;

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

＆＃13;

<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>

＆＃13;

<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>

＆＃13;

您的问题是页脚导航部分内的内容。问题是div的高度。你需要让所有div的高度相等。

使用matchheight.js

，功能是，

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

}）;

用于超小屏幕尺寸设备的Bootstrap列

2 个答案: