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>