带小屏幕笔记本电脑的Bootstrap 3网格系统问题

时间:2014-10-09 22:35:57

标签: css3 twitter-bootstrap twitter-bootstrap-3 grid

据我所知,Bootstrap 3将所有横向视图端口从13“笔记本电脑分类为24”大屏幕col-lg - x。这是从1280x800(13“笔记本电脑)到1920x1200(24”桌面电脑)。现在我的问题是有两个这样的列

<div class="container">
 <div class="row">
  <div class="col-lg-4" id="leftBox"></div>
  <div class="col-lg-8" id="rightBox"></div>
 </div>
</div>

从19“到更大的尺寸,这种布局看起来很完美,但是在较小的尺寸上,特别是13”,lefBox显得非常小,整个内容都不可读!我试图使用col-md-x类,但显然那些影响在平板电脑屏幕上

<div class="container">
 <div class="row">
  <div class="col-lg-4 col-md-6" id="leftBox"></div>
  <div class="col-lg-8 col-md-6" id="rightBox"></div>
 </div>
</div>

现在请你告诉我如何通过在小屏幕笔记本电脑上使用不同的专栏来解决这个问题?!介于col-mdcol-lg

之间

1 个答案:

答案 0 :(得分:0)

您拥有正确的代码,但订单错误。为了在较小的屏幕中使用代码,您应该像这样使用它:

<div class="col-md-6 col-lg-4">

而不是相反。首先使用较小屏幕的类。