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

Question

所以我正在尝试为我的响应式设计设置一个网格系统,以便在桌面计算机上我有一个左侧的主列用于内容和右侧栏.我希望侧边栏可以覆盖100%的屏幕,如果它在移动设备上的话.我在这里使用bootstrap站点上的示例show: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>  

看到了

祝好运!