带有侧边栏的引导程序合并侧边栏和主

Question

我已下载引导仪表板示例并正在寻找以下行为：

两个侧边栏在同一个 div 中，那么是否可以在移动设备上合并两个侧边栏部分之间的主要部分？我猜推拉在这里不起作用？

<div class="container-fluid">
<div class="row">
    <div class="col-xs-12  col-sm-3 col-md-2 sidebar">
        <div>
            top
        </div>
        <div class="col-md-push-4">
            bot
        </div>
    </div>
    <div class="col-xs-12 col-xs-offset-0 col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
        <div>map</div>
    </div>
</div>

Answer 1

使用 Bootstrap 3，您最好的选择可能是使用 hidden-xs 和 visible-xs 隐藏或显示“Bot Side”的副本。 V3 的网格系统依赖于float，并且比 V4（使用 flexbox）的灵活性稍差（请原谅双关语）。

注意：您需要单击“扩展代码段”才能完整查看实现此功能的 Bootstrap 的断点功能。

.wrapper { 
  background: blue; 
  color: white; 
  padding: 1rem;
  text-align: center;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12">
      <div class="wrapper">
        Top Navigation
      </div>
    </div>
  </div>
  
  <div class="row">
    <div class="col-xs-12 col-sm-4">
      <div class="row">
        <div class="col-xs-12">
          <div class="wrapper">
            Top Side
          </div>
        </div>
    
        <div class="col-xs-12 hidden-xs">
          <div class="wrapper">
            Bottom Side (Sidebar)
          </div>
        </div>
      </div>
    </div>
      
    <div class="col-xs-12 col-sm-8 pull-right">
      <div class="wrapper">
        Main
      </div>
    </div>
  </div>

  <div class="row visible-xs">
    <div class="col-xs-12">
      <div class="wrapper">
        Bottom Side (Small Screen Only)
      </div>
    </div>
  </div>
</div>