Question

我正在研究我的一个小项目。这是一个预订旅游的网站。我还处于早期阶段，但这就是它的样子： homepage

正如你所看到的，每次巡演都有他自己的＆＃34; div＆＃34;分为3列：预览图像，简短描述和预订旅游的按钮。我可以轻松地将图像添加为背景，但如果我将页面缩小到与移动设备相同的大小，则第二个div会出现在第一个div上方，其中包含图像，如下所示： homepage mobile size

我不知道为什么会这样。你们中的任何人都知道如何让图像的div在手机上消失或者如何解决这个问题？下面提供了HTML和CSS代码，我正在使用bootstrap。

PS：忽略按钮周围的空白区域。

＆＃13;

body {
	margin: 0px;
	padding: 0px;
}

.jumbotron {
	border-radius: 0px;
	margin-bottom: 0px;
}

.options {
	margin-top: 30px;
}

.tours {
	padding: 0px;
	margin-bottom: 25px;
	border-radius: 5px;
	border: 1px solid grey;
	max-width: 100%;
	height: 20vh;
}

.preview-img {
	height: 100%;
}

.short-descr {
	padding-top: 2vh;
	height: 100%;
	background-color: red;
}

.more-info {
	height: 100%;
	padding: 0px;
}

.infobtn {
	height: 100%;
	width: 100%;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head>
	<title>home</title>
	<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
	<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
	<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
	<script type="text/javascript" src="js/bootstrap-datepicker.js"></script>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
	<link rel="stylesheet" type="text/css" href="css/datepicker.css">
	<link rel="stylesheet" type="text/css" href="css/homepage-style.css">
</head>
<body>

	<!--Jumbotron, header for the website-->
	<div class="jumbotron text-center">

		<div class="container">
			<h1>Title</h1>
			<p>Description</p>
		</div>

	</div>

	<!--These are the columns in which the tours are displayed-->
	<div class="container options">
		
		<div class="col-xs-12 tours">

			<div class="col-sm-3 preview-img">

			</div>

			<div class="col-xs-9 col-sm-7 short-descr">
				<h4 class="text-left">Column 1</h4>
				<p class="text-left">Lorem Ipsum Dolor Sit Amet...</p>
			</div>

			<div class="col-xs-3 col-sm-2 more-info">
				<button type="button" class="btn btn-info infobtn" href="#">More</button>
			</div>

		</div>

		<div class="col-xs-12 tours">
			
		</div>

		<div class="col-xs-12 tours">
			
		</div>			

	</div>
	

</body>
</html>

＆＃13;

Answer 1

将hidden-xs课程添加到preview-img div

http://getbootstrap.com/css/#responsive-utilities

如何使用引导程序在桌面和平板电脑上显示图像，而不是在手机上显示图像？

1 个答案: