Я в настоящее время борюсь с проектом, над которым я работаю, я использую Gridstack. js с bootstrap 4 (если это имеет смысл), и я столкнулся с небольшой проблемой, которую не могу решить. каждый раз, когда я изменяю размер элемента сетки, другие элементы go бесконечно уменьшаются, хотя я сделал стек сетки максимальным: 100%! важно, что он все еще выходит за рамки этого. Мне нужно, чтобы все элементы стека сетки заполняли пустые места при изменении размера или перетаскивании их в разные места. Кто-нибудь может помочь?
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="../css/bootstrap.css">
<link rel="stylesheet" href="../css/bootstrap-grid.css">
<link rel="stylesheet" href="../css/gridstack.min.css">
<link rel="stylesheet" href="../style.css">
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/gridstack.js"></script>
<script type="text/javascript" src="../js/bootstrap.js" ></script>
<head>
<title>Klases vinjiete</title>
</head>
<body style="overflow:hidden;">
<nav class="navbar navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Klases vinjiete</a>
</nav>
<main class="grid-stack outer">
<div class="grid-stack-item" data-gs-x="4" data-gs-y="0" data-gs-width="2" data-gs-height="1">
<div class="grid-stack-item-content"><img class="img-fluid image"src="../image/nuotrauka1.jpg"></div>
</div>
<div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="4" data-gs-height="2">
<div class="grid-stack-item-content"><img class="img-fluid image"src="../image/nuotrauka2.jpg"></div>
</div>
<div class="grid-stack-item" data-gs-x="4" data-gs-y="4" data-gs-width="4" data-gs-height="2">
<div class="grid-stack-item-content"><img class="img-fluid image"src="../image/nuotrauka3.jpg"></div>
</div>
<div class="grid-stack-item" data-gs-x="12" data-gs-y="4" data-gs-width="4" data-gs-height="2">
<div class="grid-stack-item-content"><img class="img-fluid image"src="../image/nuotrauka4.jpg"></div>
</div>
<div class="grid-stack-item" data-gs-x="8" data-gs-y="4" data-gs-width="4" data-gs-height="2">
<div class="grid-stack-item-content"><img class="img-fluid image"src="../image/nuotrauka6.jpg"></div>
</div>
<div class="grid-stack-item" data-gs-x="6" data-gs-y="0" data-gs-width="2" data-gs-height="1">
<div class="grid-stack-item-content"><img class="img-fluid image"src="../image/nuotrauka7.jpg"></div>
</div>
<div class="grid-stack-item" data-gs-x="6" data-gs-y="4" data-gs-width="2" data-gs-height="1">
<div class="grid-stack-item-content"><img class="img-fluid image"src="../image/nuotrauka1.jpg"></div>
</div>
<div class="grid-stack-item" data-gs-x="4" data-gs-y="4" data-gs-width="2" data-gs-height="1">
<div class="grid-stack-item-content"><img class="img-fluid image"src="../image/nuotrauka2.jpg"></div>
</div>
<div class="grid-stack-item" data-gs-x="2" data-gs-y="4" data-gs-width="2" data-gs-height="2">
<div class="grid-stack-item-content"><img class="img-fluid image"src="../image/nuotrauka3.jpg"></div>
</div>
<div class="grid-stack-item" data-gs-x="0" data-gs-y="4" data-gs-width="2" data-gs-height="2">
<div class="grid-stack-item-content"><img class="img-fluid image"src="../image/nuotrauka4.jpg"></div>
</div>
</main>
<footer class=" text-center py-3 fixed-bottom bg-dark text-white">
© 2020 Gytis Ramanasukas
</footer>
</body>
<script type="text/javascript">
$(document).ready(function(){
$(function () {
$('.grid-stack.outer').gridstack({
cellHeight:80,
verticalMargin: 20,
horizontalMargin: 10
});
$('.grid-stack.inner').gridstack({
cellHeight: 70,
verticalMargin: 20,
horizontalMargin: 10,
});
});
});
</script>
</html>
и css
@mixin cf() {
&::before, &::after {
content: ' ';
display: table;
}
&::after {
clear: both;
}
}
html, body {
margin: 0;
padding: 0;
width:100%;
height:100%;
}
main {
height:100%;
background-color: grey;
@media (min-width: 769px) {
padding-bottom: 20px;
}
}
.grid-stack {
height: 60% !important;
max-height: 100% !important;
}
.grid-stack-item {
border: 1px solid red;
height: auto;
width: auto;
}
.grid-stack > .grid-stack-item > .grid-stack-item-content{
left: 0;
right: 0;
overflow-y: hidden;
border: 2px solid green;
width: 100%;
height: 100%;
}