0
안녕하세요. 부트 스트랩을 사용하여 간단한 갤러리를 설치하려고합니다. 갤러리를 정렬되지 않은 행에 배치했습니다. 그러나 행은 몸체의 접힌 부분 아래로 밀리기 시작합니다.이미지 갤러리 콘텐츠를 본체 아래로 밀어 넣는 부트 스트랩
두 가지 내가 궁금한 점 : 1. 부트 스트랩 열 규칙을 사용하면서 어떻게 동일한 행에 모든 갤러리 항목 (목록 항목)을 유지할 수 있습니까? 2. 현재 HTML 레이아웃의 문제점 - 왜 접힌 부분 아래로 내용을 밀어 넣고 몸 안에 넣지 않을까요? 난 당신이 배 몸에 무슨 뜻인지 잘 모르겠지만,
html,
body {
width: 100%;
height: 100%;
min-height: 560px;
}
body {
position: relative;
background-color: #fff;
-webkit-font-smoothing: antialiased;
line-height: 1.4;
font-size: 100%;
}
header {
width: 100%;
z-index: 10;
background: #212121;
padding: 40px 0 21px 0;
.wrapper {
overflow: visible;
height: 40px;
width: 940px;
margin: 0 auto;
a {
color: #fff;
text-decoration: none;
}
#logo {
text-indent: 100%;
padding-left: 20px;
white-space: nowrap;
overflow: hidden;
width: 120px;
height: 20px;
margin: 0;
float: left;
background: url("../images/maark-logo.png") no-repeat 20px 0px/100px 20px;
}
.dd-menu {
width: 40%;
float: right;
}
}
}
.main-container {
height: calc(100% - 101px);
background: #0381e2;
}
.main-container,
.row,
ul {
border: 0;
margin: 0;
padding: 0;
}
ul {
list-style: none;
display: block;
text-align: center;
}
.gallery-list-item {
height: 400px;
background: black;
border-radius: 6px;
float: none;
display: inline-block;
margin: 40px 15px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="css/app.css">
<link href='https://fonts.googleapis.com/css?family=Lato:400,300,700,900' rel='stylesheet' type='text/css'>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="scripts/scripts.js"></script>
</head>
<body>
<header>
<div class="wrapper">
<a href="" title="">
<h1 id="logo">Maark</h1>
</a>
<nav>
<select id="pages-menu" class="form-control dd-menu input-sm">
<option value="http://localhost:3000/submission-landing">page one</option>
<option value="http://localhost:3000/submission-narrative">page two</option>
<option value="http://localhost:3000/submission-final-details">page three</option>
<option value="http://localhost:3000/management-home-dashboard">page four</option>
<option value="http://localhost:3000/management-landing">page five</option>
<option value="http://localhost:3000/management-landing">page five</option>
</select>
</nav>
</div>
</header>
<div class="main-container container-full">
<ul class="row">
<li class="gallery-list-item col-sm-3">
<div class="page-thumbnail"></div>
</li>
<li class="gallery-list-item col-sm-3">
<div class="page-thumbnail"></div>
</li>
<li class="gallery-list-item col-sm-3">
<div class="page-thumbnail"></div>
</li>
</ul>
<ul class="row">
<li class="gallery-list-item col-sm-3">
<div class="page-thumbnail"></div>
</li>
<li class="gallery-list-item col-sm-3">
<div class="page-thumbnail"></div>
</li>
<li class="gallery-list-item col-sm-3">
<div class="page-thumbnail"></div>
</li>
</ul>
<ul class="row">
<li class="gallery-list-item col-sm-3">
<div class="page-thumbnail"></div>
</li>
<li class="gallery-list-item col-sm-3">
<div class="page-thumbnail"></div>
</li>
<li class="gallery-list-item col-sm-3">
<div class="page-thumbnail"></div>
</li>
</ul>
</div>
</body>
</html>