Html CSS位置固定会影响响应性设计

当我为导航标签添加

位置：已修复时，我面临响应问题


上图是实际视图。我使用了两个iFrame。左侧是导航选项卡（文本存储区、图像存储区……）。中间是滑块。右边是另一个框架

导航选项卡的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”（位置：固定）

，当我向左拖动滑块时，选项卡应自动一个接一个地向下移动。

您可以使用媒体查询删除小型设备中的“position:fixed”（位置：固定）

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

---

您可以使用媒体查询删除小型设备中的位置：固定

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

---

您必须设置.nav制表符宽度，就像您在注释中设置的那样。如果你想把它放在同一个地方，你可以试试这样的东西：

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

或设置

.nav-tabs { 
left:0; 
width: 49%; 
padding-left: 50px; 
background:none;
} 

左边是你的图标

---

我不完全理解您的iframe概念，因此如果此解决方案不适用于您，请纠正我。

您必须设置.nav选项卡宽度，就像您在注释中设置的那样。如果你想把它放在同一个地方，你可以试试这样的东西：

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

或设置

.nav-tabs { 
left:0; 
width: 49%; 
padding-left: 50px; 
background:none;
} 

左边是你的图标

我不完全理解您的iframe概念，如果此解决方案不适用于您，请纠正我。

好的

我认为你的问题是：

如果您有一个位置为“fixed”的元素，它将不在html流中，因此不受任何其他元素位置的影响（如右侧的面板）

imo，解决这个问题最简单的方法是使用一点jquery

只需获得左侧任何元素的宽度，该元素获得其容器的100%宽度（可能是您的滑块？），并将该宽度应用于您的固定元素。在页面加载和调整大小时设置事件，以便在用户手动更改浏览器宽度时重新计算

像这样：

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

其中

stuff

是我前面说过的左侧元素

在这里检查一下：

好的

我认为你的问题是：

如果您有一个位置为“fixed”的元素，它将不在html流中，因此不受任何其他元素位置的影响（如右侧的面板）

imo，解决这个问题最简单的方法是使用一点jquery

只需获得左侧任何元素的宽度，该元素获得其容器的100%宽度（可能是您的滑块？），并将该宽度应用于您的固定元素。在页面加载和调整大小时设置事件，以便在用户手动更改浏览器宽度时重新计算

像这样：

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

其中

stuff

是我前面说过的左侧元素

---

请在此处查看：

这是一个纯风格的引导解决方案：

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

.right、.left{
高度：200px；
背景颜色：橙色；
边框：1px纯白；
}
.left{背景色：绿色；}

左边
正确的
左边
正确的
左边
正确的
左边
正确的

这里是一个纯风格的引导解决方案：

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

.right、.left{
高度：200px；
背景颜色：橙色；
边框：1px纯白；
}
.left{背景色：绿色；}

左边
正确的
左边
正确的
左边
正确的
左边
正确的

请提供更多html代码或提供指向jsfiddle代码段的链接我们需要查看您的

nav

nav选项卡的完整css

@Banzay我有更多代码更新。@WhiteHox抱歉，我不能在jsfiddle中提供此内容，因为我必须添加更多的js和链接。很抱歉我的不同意。请提供更多html代码或提供指向JSFIDLE代码段的链接。我们需要查看您的

nav

nav选项卡的完整css

@Banzay我有更多代码更新。@WhiteHox抱歉，我不能在JSFIDLE中提供此内容，因为我必须添加更多的js和链接。对不起，我不想调整我的窗口大小，我要把滑块（2帧中间的拆分器）拖到左边。但是你是理解我问题的人。请给我答案，我给了你答案。添加一个宽度为您需要设置的元素

nav

（使其不固定）并使用我的解决方案。您甚至可以使用

display:none

使元素不可见。根据您提供的问题信息，我们无法提供任何其他帮助。（用你的js和链接做一个小摆弄。这是可以做到的）我不会调整我的窗口的大小，我会把滑块（2帧中间的拆分器）拖到左边。但是你是理解我的问题的人。请给我答案，我给了你答案。添加一个宽度为您需要设置的元素

nav

（使其不固定）并使用我的解决方案。您甚至可以使用

display:none

使元素不可见。根据您提供的问题信息，我们无法提供任何其他帮助。做一个小提琴（用你的js和链接。这是可以做到的）我不想看小设备兄弟，中间有一个滑块（拆分器）如果我拖动到左侧，标签应该会自动一个接一个下来。我不想看小设备兄弟，有一个