时间戳

首页 > 解决方案 > 需要帮助根据屏幕宽度删除或​​隐藏 div

javascript - 需要帮助根据屏幕宽度删除或​​隐藏 div

问题描述

因此，我无法将任何大于 768像素（平板电脑/台式机）的屏幕上的 3x3 图像库布局更改为小于768 像素（移动设备）的任何屏幕的图像滑块。

在每个人，尤其是达尼洛（评论中的解决方案）的帮助之后，问题是 css 没有正确定位屏幕，我需要 - @media only screen，我也错过了一个DIV ...（我知道 noob 错误）。

因此，如果有人试图在Bootstrap 4中将显示的内容从桌面布局更改为移动布局，您可以使用针对包装 DIV的CSS 媒体查询来显示或不显示。

更新了以下工作片段：

@media only screen and (min-width: 768px) {
    .slider {
        display: none;
    }
    .block {
        display: block;
    }
}

@media only screen and (max-width: 768px) {
    .slider {
        display: block;
    }
    .block {
        display: none;
    }
}

.hold-tests {
    display: flex;
    width: 100%;
}

.col {
    flex: 1;
} 
	<!--- Start of Gallery Section -->	
	<div id="hold-tests">
		<div class="col slider">
			<div id="sliderIndicators" class="carousel slide carousel-fade z-depth-1-half" data-ride="carousel" data-interval="9000">
				<div class="carousel-inner col-" role="listbox">
					<!--- First Slide -->
					<div class="carousel-item active">
						<img src="Img/PHportrait.png" alt="background image">
					</div>
					<div class="carousel-item">
						<img src="Img/PHportrait2.png" alt="background image">
					</div>
					<div class="carousel-item">
						<img src="Img/PHportrait.png" alt="background image">
					</div>
				</div>
					<div class="narrow">
						<div class="col-12">
							<p class="lead text-center">Want to see more of my work?</p>
							<!-- add in social media icons and add target="_blank" to open in new tab -->
						</div>
					</div>
			</div>
		</div>	

		<div class="col block">
			<div id="gallery" class="offset">
				<div class="col-md">
					<div class="row no-padding">
							<div class="col-md-4">
								<div class="gallery-card">
									<a href="Img/PHportrait.png" target="_blank">
										<img src="Img/PHportrait.png" class="img-fluid" alt="Gallery Picture">
									</a>
								</div>
							</div>
							<div class="col-md-4">
								<div class="gallery-card">
									<a href="Img/PHportrait.png" target="_blank">
										<img src="Img/PHportrait.png" class="img-fluid" alt="Gallery Picture">
									</a>
								</div>
							</div>
							<div class="col-md-4">
								<div class="gallery-card">
									<a href="Img/PHportrait.png" target="_blank">
										<img src="Img/PHportrait.png" class="img-fluid" alt="Gallery Picture">
									</a>
								</div>
							</div>
						<div class="col-md-4">
							<div class="gallery-card">
								<a href="Img/PHportrait.png" target="_blank">
									<img src="Img/PHportrait.png" class="img-fluid" alt="Gallery Picture">
								</a>
							</div>
						</div>
						<div class="col-md-4">
							<div class="gallery-card">
								<a href="Img/PHportrait.png" target="_blank">
									<img src="Img/PHportrait.png" class="img-fluid" alt="Gallery Picture">
								</a>
							</div>
						</div>
						<div class="col-md-4">
							<div class="gallery-card">
								<a href="Img/PHportrait.png" target="_blank">
									<img src="Img/PHportrait.png" class="img-fluid" alt="Gallery Picture">
								</a>
							</div>
						</div>
					</div>
				</div>
				<div class="narrow">
					<div class="col-12">
						<p class="lead text-center">Want to see more of my work?</p>
							<!-- add in social media icons and add target="_blank" to open in new tab -->
					</div>
				</div>
			</div>
		</div>
	</div>
	<!--- End of Gallery Section -->

标签： javascriptjqueryhtmlcssbootstrap-4

解决方案

由于您使用的是引导程序，因此请使用它。不需要 jQuery，因为它已经被完全覆盖了。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="d-none d-md-block">
  Only visible starting from md
</div>
<div class="d-md-none">
  Only visible on small screen
</div>

https://getbootstrap.com/docs/4.0/utilities/display/

https://v4-alpha.getbootstrap.com/layout/responsive-utilities/

另请注意，ID 通常不以#. 尽管这可能是合法的，但您至少必须在 jquery 代码中使用 $('##option1') 选择它们。

推荐阅读