0
私は私の小さなプロジェクトに取り組んでいます。 ツアー予約のウェブサイトです。 は、私はまだ初期段階にだけど、これは次のようになります。あなたが見ることができるように homepage画像をデスクトップやタブレットに表示するにはどうすればよいですか？電話機ではなく、ブートストラップを使用しますか？
、各ツアーは、3列に分かれ、自分の「DIV」があります。プレビュー画像、簡単な説明をし、ツアーを予約するためのボタン。 私は簡単に背景として画像を追加することができますが、私はモバイルからそのようなサイズにページを縮小した場合、第二のdivはこのように、その中の画像との最初のものの上に表示されます： homepage mobile size
Iなぜこれが起こるのか分かりません。あなたはどのようにイメージの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>