Question

我正在创建一个仪表板并有3个div，如下例所示。在某个屏幕尺寸下，左侧边栏会折叠，屏幕上会出现一个按钮以切换侧边栏，类似于Bootstrap Off-Canvas示例。

当我切换左侧边栏时，右侧边栏包裹在中间栏下方。

我该怎样做才能阻止右侧边栏包裹，而是让它向右推并裁剪/隐藏溢出？

谢谢！

   <div class="container-fluid main-content">
    <div class="left-sidebar">Content of Left Sidebar</div>
    <div class="middle-content">Content of Middle</div>
    <div class="right-side">Content of Right Sidebar</div>
  </div>

Answer 1

<div class="container">
  <div class="row">
      <div class="col-md-4 col-sm-4 col-xs-4">
          Content of Left Sidebar
      </div>
      <div class="col-md-4 col-sm-4 col-xs-4">
         Content of Middle
      </div>
      <div class="col-md-4 col-sm-4 col-xs-4">
         Content of Right Sidebar
      </div>
  </div>
</div>

使用网格类简化布局设置

我有3个div，他们包裹而不是向右推

1 个答案: