0
我正在研究我的一個小項目。 這是一個預訂旅遊的網站。 我仍然處於早期階段，但是這是什麼樣子： homepage如何使用引導程序將圖像顯示在桌面和平板電腦上，而不是手機上？
正如你所看到的，每個導遊都有自己的「分區」，在3列分爲：預覽圖像，簡短描述和預訂旅程的按鈕。 我可以很容易地添加一個圖像作爲背景，但如果我縮小頁的大小一樣，從移動，一個第二個div出現上述的第一個，在它的圖像，如下所示： homepage mobile size
我不知道爲什麼會發生這種情況。你們有沒有想過如何讓圖像的div在手機上消失或者如何解決這個問題？ 下面提供了HTML和CSS代碼，我使用引導程序。
PS：忽略按鈕周圍的空白區域。
body {
\t margin: 0px;
\t padding: 0px;
}
.jumbotron {
\t border-radius: 0px;
\t margin-bottom: 0px;
}
.options {
\t margin-top: 30px;
}
.tours {
\t padding: 0px;
\t margin-bottom: 25px;
\t border-radius: 5px;
\t border: 1px solid grey;
\t max-width: 100%;
\t height: 20vh;
}
.preview-img {
\t height: 100%;
}
.short-descr {
\t padding-top: 2vh;
\t height: 100%;
\t background-color: red;
}
.more-info {
\t height: 100%;
\t padding: 0px;
}
.infobtn {
\t height: 100%;
\t width: 100%;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head>
\t <title>home</title>
\t <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
\t <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
\t <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
\t <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
\t <script type="text/javascript" src="js/bootstrap-datepicker.js"></script>
\t <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
\t <link rel="stylesheet" type="text/css" href="css/datepicker.css">
\t <link rel="stylesheet" type="text/css" href="css/homepage-style.css">
</head>
<body>
\t <!--Jumbotron, header for the website-->
\t <div class="jumbotron text-center">
\t \t <div class="container">
\t \t \t <h1>Title</h1>
\t \t \t <p>Description</p>
\t \t </div>
\t </div>
\t <!--These are the columns in which the tours are displayed-->
\t <div class="container options">
\t \t
\t \t <div class="col-xs-12 tours">
\t \t \t <div class="col-sm-3 preview-img">
\t \t \t </div>
\t \t \t <div class="col-xs-9 col-sm-7 short-descr">
\t \t \t \t <h4 class="text-left">Column 1</h4>
\t \t \t \t <p class="text-left">Lorem Ipsum Dolor Sit Amet...</p>
\t \t \t </div>
\t \t \t <div class="col-xs-3 col-sm-2 more-info">
\t \t \t \t <button type="button" class="btn btn-info infobtn" href="#">More</button>
\t \t \t </div>
\t \t </div>
\t \t <div class="col-xs-12 tours">
\t \t \t
\t \t </div>
\t \t <div class="col-xs-12 tours">
\t \t \t
\t \t </div> \t \t \t
\t </div>
\t
</body>
</html>