使用Bootstrap 3.0如何让我的侧栏列在移动设备上跨度达到100％？

Question

所以我正在尝试为我的响应式设计设置一个网格系统，以便在桌面计算机上我有一个左侧的主列用于内容和右侧栏。我希望侧边栏可以覆盖100％的屏幕，如果它在移动设备上的话。我在这里使用bootstrap网站上的示例节目：页面底部的http://examples.getbootstrap.com/grid/ - 或者如下所示......

  <div class="row">
    <div class="col-12 col-sm-8 col-lg-8">main content</div>
    <div class="col-6 col-sm-4 col-lg-4">right side bar</div>
  </div>

主要内容列的范围为100％，但右侧栏列不显示。它跨越80％的屏幕（我认为）。如果它在移动网站上，我希望它能100％完成，因为没有任何意义可以保持它更小并且在它右边有空白区域。

Answer 1

这应该适合你：

<div class="row">
<div class="col-12 col-sm-8 col-lg-8 main">main content</div>
<div class="col-12 col-sm-4 col-lg-4 right">right side bar</div>
</div>  

see live

祝你好运！