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

Question

所以我在将任何屏幕 > 大于 768px（平板电脑/台式机）上的 3x3 图片库布局更改为任何屏幕 的图像滑块时遇到了问题（移动）。

在大家，尤其是 Danilo（cmets 中的解决方案）的帮助之后，问题是 css 没有正确定位屏幕，我需要 - @media only screen em>，我也错过了一个 DIV...（我知道菜鸟错误）。

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

更新了下面的工作 sn-p：

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

Answer 1

由于您使用的是引导程序，因此请使用它。不需要 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') 选择它们。

Answer 2

你可以做到这一点，只需使用 CSS

html

<div class="hold-tests">
    <div class="col test1">Test1</div>
    <div class="col test2">Test2</div>
    <div class="col test3">Test3</div>
</div>

css

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

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

.col {
    flex: 1;
}