个人中心
gpt4 book ai didi

html - 如何在引导容器内显示全宽内容

转载 作者：太空宇宙 更新时间：2023-11-04 05:49:51 26 4
gpt4 key购买 nike

我正在尝试使用 css 创建一个旋转木马 slider ，atm 在 chrome/firefox/IE 上工作正常，它看起来像这样:

enter image description here

现在我希望 slider 在屏幕上完整显示，因为它位于容器内，所以我添加了一个技巧来实现:

margin-left:-2000px;
margin-right:-2000px;
padding-left:2000px;
padding-right:2000px;
background-color: #e2e7fe;

最后看起来像这样:

enter image description here

这在 chrome 上运行良好，但在 firefox 和 IE 上无法完全滚动内容。是否有更好的解决方案来应用负边距和填充或以某种方式解决该问题？

编辑:我需要容器内的 slider ，因为这是我真实网站的一个示例，我在网络中有更多 slider ，而不仅仅是顶部的一个

<!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>

最佳答案

因为你不想把轮播 slider div 拿出来放在container 类之外。也有一个修复方法。我为此使用了视口(viewport)宽度 (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 中称为。中(md)、小(sm)、特小(xs)屏需要自己计算，和我一样用于 lg。只需为 left 位置的不同分辨率设置媒体查询。

工作 fiddle :- https://jsfiddle.net/szreLuwn/2/

希望，它能满足您的要求。

谢谢

关于html - 如何在引导容器内显示全宽内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58373543/

26 4 0
文章推荐： linux - Linux 中的 ARP 创建失败条目
文章推荐： c - 尝试生成大型数据集时出现问题
文章推荐： python - Pymodbus 读/写 float (真实)
文章推荐： linux - 如何使用 awk regExp 进行多重模式检查并以 Excel 格式打印
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com