Question

当我为导航标签添加position:fixed时，我正面临响应式问题。

上面的图片是实际视图。我正在使用2个两个iframe。左侧是nav-tab（text-bucket，image-bucket ....）。中间是一个滑块。右边是另一个框架。

导航标签的HTML： -

<ul class="nav nav-tabs">
            <li class="active"><a data-toggle="tab" href="#home">Text Bucket</a></li>
            <li><a data-toggle="tab" href="#menu1">Image Bucket</a></li>
            <li><a data-toggle="tab" href="#menu2">Table Bucket</a></li>
            <li><a data-toggle="tab" href="#menu3">View Selected Items</a></li>
            <li><a data-toggle="tab" class="prev" href="#preview">Preview</a></li>
</ul>

我想修复整个导航标签部分，所以我添加了position:fixed。

CSS： -

.nav {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}
ul.nav-tabs {
    position: fixed;
    background-color: #fff;
    z-index: 1;
    /* width: 48%; */
}
.nav>li {
    position: relative;
    display: block;
}
.nav-tabs>li {
    float: left;
    margin-bottom: -1px;
}

从上面的图像中，当我使用中间滑块向左拖动时，您可以看到预览标签保持不变。这是因为位置：固定。如果我删除固定位置它正常工作，预览选项卡将会响应。

任何解决方案？我需要选项卡顶部为position:fixed，当我向左拖动滑块时，标签应自动逐个下降。

Answer 1

您可以移除位置：使用媒体查询在小型设备中修复

@media (max-width:992px){
  ul.nav-tabs { position:static; }
}

Answer 2

您必须设置.nav-tabs宽度，就像您在评论中设置一样。如果你想在同一个地方，你可以试试这样的事情：

'ui.dialog' => array('fileName' => 'jquery.ui.dialog.min.js', 'dependencies' => array('ui.core', 'ui.widget', 'ui.position','ui.button'), 'theme' => true),

或设置

.nav-tabs {
    left: 5%;
    width: 44%
}

其中填充左侧是您的图标。

我不完全理解您的iframe概念，所以如果此解决方案不适合您，请更正我。

Answer 3

确定。

我认为你的问题就是这个问题：JSFIDDLE

如果你有一个具有“固定”位置的元素，它将不在html流程中，因此它不会受到任何其他元素位置的影响（如右侧的面板）

解决它的最简单的方法，imo，有点jquery。

获取左侧任何元素的宽度，获得其容器的100％宽度（您的滑块可能？）并将此宽度调整到固定元素。在页面加载和调整大小时进行事件，以便在用户手动更改浏览器宽度时重新计算。

像这样：

$(window).resize(function () {
    $('.nav-tabs').outerWidth($('.stuff').width());
}).resize();

其中stuff就是我前面所说的左侧元素。

在这里嘲笑：JSFIDDLE

Answer 4

这是一个纯粹的Bootstrap解决方案： jsfiddle.net/6n0fctpc/

该代码段具有相同的代码：

.right, .left {
  height:200px;
  background-color:orange;
  border: 1px solid white;
}
.left {background-color:green;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
  <nav class="navbar-fixed-top">
    <div class="container-fluid">
      <div class="row">
        <div class="col-xs-6">
          <nav class="navbar navbar-default">
            <ul class="nav nav-tabs">
              <li class="active"><a data-toggle="tab" href="#home">Text Bucket</a></li>
              <li><a data-toggle="tab" href="#menu1">Image Bucket</a></li>
              <li><a data-toggle="tab" href="#menu2">Table Bucket</a></li>
              <li><a data-toggle="tab" href="#menu3">View Selected Items</a></li>
              <li><a data-toggle="tab" class="prev" href="#preview">Preview</a></li>
            </ul>
          </nav>
        </div>
        <div class="col-xs-6"></div>
      </div>
    </div>
  </nav>
  <div class="row">
    <div class="col-xs-6 left">left </div>
    <div class="col-xs-6 right">right</div>
  </div>
  <div class="row">
    <div class="col-xs-6 left">left </div>
    <div class="col-xs-6 right">right</div>
  </div>
  <div class="row">
    <div class="col-xs-6 left">left </div>
    <div class="col-xs-6 right">right</div>
  </div>
  <div class="row">
    <div class="col-xs-6 left">left </div>
    <div class="col-xs-6 right">right</div>
  </div>
</div>

超过here，您会找到针对缩小的固定页脚的类似问题的解决方案。

CSS位置已修复会影响响应式设计

4 个答案: