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

Question

我正在尝试使用 bootstrap 制作响应式列。在桌面和大屏幕尺寸中，它应该有 4 列。在选项卡 window 中它应该有 3 列，在超小视口(viewport)中它应该是 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 设备尺寸的屏幕截图-

Answer 1

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

在 Bootstrap documentation 对于网格系统，他们建议您在列之间添加一个新的 div 以帮助它了解列应该清除的位置。 div 应该有一个 clearfix 类，这样列就可以在左边清除，还有一个帮助类，这样你就可以定位一个特定的视口(viewport)。

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>