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>