html - 如何在引导容器内全宽显示内容
问题描述
我正在尝试使用 css 创建一个轮播滑块，atm 在 chrome/firefox/IE 上运行良好，它看起来像这样：
现在我希望滑块在屏幕上完全显示，因为它位于容器内，所以我添加了一个技巧来完成它：
margin-left:-2000px;
margin-right:-2000px;
padding-left:2000px;
padding-right:2000px;
background-color: #e2e7fe;
最后看起来像这样：
这在 chrome 上运行良好，但在 Firefox 和 IE 上无法完全滚动内容。是否有更好的解决方案来应用负边距和填充或以某种方式解决该问题？
编辑：我需要容器内的滑块，因为这是我真实网站中的一个示例，其中我在网络中有更多滑块，而不仅仅是一个在顶部
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style type="text/css">
body {
overflow-x: hidden;
background-color: #f0f0e8;
}
.container {
background-color: #e2e7fe;
}
.slider {
white-space: nowrap !important;
overflow-x: auto;
overflow-y: hidden;
margin-left:-2000px;
margin-right:-2000px;
padding-left:2000px;
padding-right:2000px;
background-color: #e2e7fe;
}
.slide {
display: inline-block;
margin: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12">
<ul class="slider">
<li class="slide"><img src="https://picsum.photos/id/1068/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/189/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/996/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/603/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/933/200/200"></li>
<li class="slide"><img src="http://picsum.photos/id/32/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/21/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/22/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/23/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/24/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/25/200/200"></li>
<li class="slide"><img src="http://picsum.photos/id/26/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/27/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/28/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/29/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/30/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/31/200/200"></li>
<li class="slide"><img src="http://picsum.photos/id/39/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/33/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/34/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/35/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/36/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/37/200/200"></li>
<li class="slide"><img src="http://picsum.photos/id/38/200/200"></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-12">
<h1>Some content</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet purus gravida quis blandit turpis cursus in hac habitasse. Risus at ultrices mi tempus imperdiet nulla malesuada. Maecenas volutpat blandit aliquam etiam erat velit scelerisque in. Vel pharetra vel turpis nunc eget lorem. Nulla pellentesque dignissim enim sit amet venenatis urna. Tincidunt eget nullam non nisi est sit amet facilisis. Ullamcorper sit amet risus nullam eget felis. Faucibus a pellentesque sit amet. Consectetur lorem donec massa sapien faucibus. Vitae suscipit tellus mauris a diam maecenas sed enim ut. Id velit ut tortor pretium viverra suspendisse potenti. Mi sit amet mauris commodo quis imperdiet. Interdum consectetur libero id faucibus nisl tincidunt eget nullam. A lacus vestibulum sed arcu. Sed libero enim sed faucibus turpis in eu mi. Aenean et tortor at risus viverra. Varius morbi enim nunc faucibus a pellentesque. Egestas sed sed risus pretium quam vulputate dignissim suspendisse.
</p>
<p>
Malesuada fames ac turpis egestas maecenas pharetra convallis. Sed cras ornare arcu dui vivamus arcu felis bibendum ut. Enim facilisis gravida neque convallis a cras semper auctor neque. Eu scelerisque felis imperdiet proin. Mi sit amet mauris commodo quis imperdiet massa. Neque sodales ut etiam sit amet nisl purus in mollis. Pulvinar neque laoreet suspendisse interdum consectetur libero id faucibus. Sem fringilla ut morbi tincidunt augue interdum. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Commodo quis imperdiet massa tincidunt nunc pulvinar sapien. Sociis natoque penatibus et magnis. Dignissim convallis aenean et tortor at risus viverra. Feugiat in fermentum posuere urna. Faucibus scelerisque eleifend donec pretium vulputate sapien. Dolor purus non enim praesent elementum. Erat nam at lectus urna duis convallis convallis. Platea dictumst quisque sagittis purus. Ligula ullamcorper malesuada proin libero nunc consequat. Tortor condimentum lacinia quis vel eros donec ac odio tempor.
</p>
<p>
Tristique senectus et netus et malesuada fames ac. Congue nisi vitae suscipit tellus. Interdum consectetur libero id faucibus nisl tincidunt. Mauris vitae ultricies leo integer. Eros in cursus turpis massa tincidunt dui ut ornare lectus. In aliquam sem fringilla ut morbi tincidunt augue interdum velit. Pretium viverra suspendisse potenti nullam ac. Eu nisl nunc mi ipsum faucibus vitae aliquet. Elementum nisi quis eleifend quam adipiscing vitae proin sagittis. Enim lobortis scelerisque fermentum dui faucibus in ornare quam. Enim ut sem viverra aliquet eget sit. Dolor sit amet consectetur adipiscing. Amet nulla facilisi morbi tempus. Vulputate dignissim suspendisse in est ante in. Lectus urna duis convallis convallis tellus id. Vitae semper quis lectus nulla at volutpat diam ut. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Pretium quam vulputate dignissim suspendisse in est ante. Ac placerat vestibulum lectus mauris. Feugiat pretium nibh ipsum consequat nisl vel pretium lectus quam.
</p>
<p>
Dui id ornare arcu odio. Sed id semper risus in. Amet consectetur adipiscing elit ut aliquam purus sit amet luctus. Est ullamcorper eget nulla facilisi etiam dignissim. Nibh praesent tristique magna sit amet. Turpis egestas pretium aenean pharetra. Maecenas accumsan lacus vel facilisis volutpat. A cras semper auctor neque vitae tempus quam. Ultricies mi eget mauris pharetra et ultrices neque. Enim praesent elementum facilisis leo vel fringilla. Dolor magna eget est lorem ipsum. Sollicitudin aliquam ultrices sagittis orci a scelerisque purus semper eget. Ut tristique et egestas quis. Id cursus metus aliquam eleifend mi in. Rhoncus dolor purus non enim praesent elementum facilisis leo. Sed lectus vestibulum mattis ullamcorper. Senectus et netus et malesuada fames ac turpis. Vestibulum sed arcu non odio euismod. Sagittis id consectetur purus ut faucibus pulvinar elementum.
</p>
<p>
Eget mauris pharetra et ultrices neque ornare. Non sodales neque sodales ut etiam sit amet nisl. Enim ut tellus elementum sagittis vitae et leo duis ut. Augue lacus viverra vitae congue eu consequat. Purus semper eget duis at tellus at. Sed egestas egestas fringilla phasellus faucibus. Libero volutpat sed cras ornare. Venenatis lectus magna fringilla urna porttitor rhoncus. Dolor magna eget est lorem. Sed blandit libero volutpat sed cras ornare. Id cursus metus aliquam eleifend mi in nulla posuere.
</p>
<p>
Velit sed ullamcorper morbi tincidunt ornare massa eget egestas purus. Ante in nibh mauris cursus mattis molestie. Sed elementum tempus egestas sed. Donec adipiscing tristique risus nec feugiat in fermentum posuere. Vitae semper quis lectus nulla at volutpat. Dignissim cras tincidunt lobortis feugiat vivamus at augue eget. Sed libero enim sed faucibus turpis in. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Senectus et netus et malesuada fames ac. Dui vivamus arcu felis bibendum ut tristique et. Gravida quis blandit turpis cursus in hac habitasse platea. Viverra accumsan in nisl nisi. Vel risus commodo viverra maecenas accumsan lacus vel. Scelerisque eleifend donec pretium vulputate sapien.
</p>
<p>
Turpis egestas sed tempus urna. Fermentum posuere urna nec tincidunt praesent semper feugiat nibh. Magna ac placerat vestibulum lectus mauris. Lorem ipsum dolor sit amet consectetur adipiscing elit. Consequat id porta nibh venenatis cras sed. Volutpat consequat mauris nunc congue nisi vitae suscipit tellus. Diam quam nulla porttitor massa id neque. Justo eget magna fermentum iaculis eu non diam. Fermentum iaculis eu non diam phasellus. Aliquam ultrices sagittis orci a scelerisque purus semper. Sit amet nisl purus in mollis nunc sed id. Id aliquet risus feugiat in ante metus dictum at tempor. Quisque id diam vel quam elementum pulvinar etiam. Aliquet eget sit amet tellus cras adipiscing enim eu turpis. Venenatis a condimentum vitae sapien. Viverra adipiscing at in tellus integer feugiat scelerisque.
</p>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>解决方案
由于您不想取出轮播滑块 div 以退出container课堂。也有一个解决方法。我已经vw为它使用了视口宽度（），然后以正确的方式计算它，轮播将适合全屏。
CSS：-
.slider {
white-space: nowrap !important;
overflow-x: auto;
overflow-y: hidden;
margin: 0;
padding: 0;
background-color: #e2e7fe;
width: calc(100vw);
position: relative;
left: 34.5em;
transform: translateX(-50%);
}
但请注意，我的修复仅适用于大屏幕（lg在 bootstrap 中称为）。对于 medium( md)、small( sm) 和 extra small( xs) 屏幕，您必须使用与我相同的计算方法自行计算lg。只是您必须为left位置的不同分辨率设置媒体查询。
工作小提琴：- https://jsfiddle.net/szreLuwn/2/
希望，它满足您的要求。
谢谢
推荐阅读
- javascript - 如何在 Javascript 中创建一个 HTML 元素，它只维护自己的属性？
- r - 使用ggplot在`R`中绘制多列的箱线图
- c# - 我无法在 VisualStudio 2019 社区版本 16.6.2 中安装包“Microsoft.VisualStudio.Web.CodeGeneration.Design”
- .htaccess - 如何重定向 /postPOSTID.html /posts/POSTID/
- reactjs - 无法读取 .include 的属性未定义 - 反应
- javascript - res.json 没有向客户端发送我的错误消息？
- python - python 监督学习与数据集分类
- reactjs - React 在不同组件中的使用状态
- php - 在 PHP 中使用 offset 和 limit by 和准备好的语句，而不会出现绑定参数错误
- python-3.x - recursionerror：与 skopt 相比，在 tensorflow 中超出了最大递归深度