带有侧边栏合并侧边栏和主边栏的Bootstrap

Question

我已经下载了bootstrap仪表板示例，并且正在寻找以下行为：

两个侧面部分在同一个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，您最好的选择可能是重复“Bot Side＆＃39;使用hidden-xs和visible-xs进行隐藏或显示。 V3依赖float作为其网格系统，并且比V4（使用flexbox）灵活性稍差（请原谅双关语）。

注意：您需要点击“展开代码段”＆＃39;完全查看启用此功能的Bootstrap的断点功能。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;