Bootstrap选项卡在更改系统分辨率时更改位置

Question

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

以下是我的代码段：

<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分辨率附加标签的屏幕截图。

Answer 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