用于超小屏幕尺寸设备的引导列答案

【问题标题】：Bootstrap columns for extra small screen size devices用于超小屏幕尺寸设备的引导列
【发布时间】：2017-12-09 18:09:01
【问题描述】：

我正在尝试使用引导程序制作响应式列。在桌面和大屏幕尺寸中，它应该有 4 列。在选项卡视口中，它应该有 3 列，而在超小的视口中，它应该是 2 列。

这是我的标记 -

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

此标记在小屏幕、桌面屏幕和大屏幕尺寸中都能正常工作。但它在超小的尺寸上很乱。检查此JSBIN 以获得更好的理解。

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

【问题讨论】：

即使在 xs 设备上也能正常工作！！你能解释一下这个问题吗？
@ZeRubeus，查看jsbin.com/jowovowati/1/edit?html,output
xs 设备列未正确显示。第一列和第二列都可以。但是第三和第四
@ZeRubeus，我用 xs 设备大小的屏幕截图更新了我的问题。那是你的小提琴结果。

标签： html css twitter-bootstrap responsive-design

【解决方案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>

【讨论】：

可能还需要删除col-sm-4

【解决方案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>

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

使用matchheight.js

函数是，

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

});

【讨论】：