引导选项卡在更改系统分辨率时更改位置答案

【问题标题】：Bootstrap tabs changing the position on changing the resolution of system引导选项卡在更改系统分辨率时更改位置
【发布时间】：2015-10-05 21:16:15
【问题描述】：

我有一个使用引导选项卡的网页。但是当我更改系统的分辨率并尝试时，选项卡会重新定位到其他地方，而不是响应视口的大小。我如何根据我选择的任何分辨率来定位它？

下面是我的代码sn-p：

<div class="container" id="toptab" style="position:absolute;top:10px;">
 <div class="row">
    <div class="col-sm-3 col-md-6 col-lg-12">    
       <ul class="nav nav-tabs">   
          <li id="tab1" class="active">
             <a href="${ctxRoot}/app/user/hours/populate" data-toggle="tab">My Hours</a>
          </li>
          <li id="tab2">
             <a href="${ctxRoot}/app/user/hours/reviewHours" data-toggle="tab">Review Hours</a>
          </li>
       </ul>
    </div>
  </div>
</div>

我附上1920分辨率和1280分辨率的标签截图。

【问题讨论】：

你可以为这个问题添加一个小提琴
精确调整页面大小时会发生什么？你能做一个小提琴或者至少是你看到的截图吗？

标签： jquery css html twitter-bootstrap-3

【解决方案1】：

您正在使用此值col-sm-3 col-md-6 col-lg-12 定义一个网格单元，这意味着：

- If the screen is small (between 768 and 992px width) use the 25% of the width.
- If the screen is medium (between 992 and 1200) use the 50% of the width
- If the screen is large (>= 1200px) use the whole

因此，您可能需要将其更改为：

<div class="col-sm-12 col-md-6 col-lg-3">

在这里查看bootstrap grids：link

Fiddle

【讨论】：