0
Hey ich versuche Setup nur eine einfache Galerie Bootstrap mit - i die Galerie verlegt in Zeilen aus, die ungeordnete Listen sind. die Reihen beginnen jedoch, unter die Falte des Körpers geschoben zu werden.Bootstrap schieben Bildergalerie unterhalb des Körpers
zwei Dinge, über die ich gespannt bin: 1. Wie kann ich alle meine Galerieelemente (die Listenelemente) in derselben Zeile behalten, während ich die Bootstrap-Spaltenkonventionen verwende. 2. was mit meinem aktuellen HTML-Layout falsch ist - warum ist es, den Inhalt unter der Falte schieben und sie nicht im Körper halten.
hier ist ein pen for you to check out
hier ist der Code ...
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>