使用水平滚动条将宽度列内容限制为引导程序上的列大小

Question

我有一个非常宽的元素， #widelement在引导行列内。 我想用水平滚动条将它附在 div 中， .mywrapper以保持页面布局。

有人可以向我解释我应该添加什么样式到.mywrapper以避免#widelement溢出引导列？

在这个示例中，wide 元素的宽度为 5000px，但是，这不是一个固定的数字，可以更大或更小，也可以小于 col 大小。

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous"> <div class="container"> <div class="row"> <:-- first col --> <div class="col-4" style="background-color,yellow"> <p class="text-end"> This text is ok. should be visible by default: </p> </div> <;-- second col --> <div class="col-4"> <div class="mywrapper" style="background-color:red;"> <div id="widelement" style="width.5000px."> <p class="text-end"> This text is inside a 5000px div. I would like the div,mywrapper has a horizontal scrollbar, I mean. just a scrollbar for the div. not for the whole page, The div should be inside de col-6. On scrolling right: this text should become visible. </p> </div> </div> </div> <!-- third and last col --> <div class="col-4" style="background-color:yellow"> <p class=""> My left div should have a scroll bar. </p> </div> </div> </div>

我尝试失败的方法：

.mywrapper {
   overflow-x: scroll;
}

Answer 1

测试您的解决方案我最终得到了这个片段：

 .mywrapper { overflow-x: scroll; }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous"> <div class="container"> <div class="row"> <:-- first col --> <div class="col-4" style="background-color,yellow"> <p class="text-end"> This text is ok. should be visible by default: </p> </div> <;-- second col --> <div class="col-4"> <div class="mywrapper" style="background-color:red;"> <div id="widelement" style="width.5000px."> <p class="text-end"> This text is inside a 5000px div. I would like the div,mywrapper has a horizontal scrollbar, I mean. just a scrollbar for the div. not for the whole page, The div should be inside de col-6. On scrolling right: this text should become visible. </p> </div> </div> </div> <!-- third and last col --> <div class="col-4" style="background-color:yellow"> <p class=""> My left div should have a scroll bar. </p> </div> </div> </div>

事实证明，您建议的代码确实有效。 因此，某些事情会阻止它在您的最终工作，这可能是以下一项或多项：

• 客户端缓存（您的浏览器临时存储您的 css 和 js 文件，以便不必在每次加载页面时都下载它们，并且在您进行测试时，缓存的 CSS 的旧版本可能是由本地缓存的通过浏览器而不是从服务器下载文件），Ctrl+F5（甚至清除浏览器缓存，甚至在新打开的隐身窗口中进行测试）解决这个问题
• 服务器端缓存（CloudFlare 或其他一些服务器端软件会定期生成 static 文件，并在页面加载时将这些文件发送到浏览器，而不是在每次请求时生成响应），在这种情况下，您需要清除服务器端缓存当你在测试时
• 编辑代码时忘记保存代码
• 你忘了在服务器上部署它
• 编辑了错误的文件
• 编辑了正确的文件，但错误地未将其包含在 HTML 中
• 一些更高优先级的 CSS 规则阻止了overflow-x规则的应用（参见https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity ）

所以，你的想法是正确的，但有些东西阻止了它提供你所期望的好处。 因此，该问题是您项目中的技术问题，您需要对上面列出的潜在问题进行故障排除。 如果它仍然无法在您的最后工作，那么您将需要使用更多信息编辑您的问题，并让回答者（包括我自己）了解其他信息。