[英]How can I remove white space from a bootstrap container?
I have this website: https://acanhs.org/nhs-articles.html for some reason their is a lot of empty white space in the container.我有这个网站: https : //acanhs.org/nhs-articles.html出于某种原因,它们的容器中有很多空白区域。 How can I change the height of this element.
如何更改此元素的高度。
My html:我的html:
<center>
<section class="blog-posts grid-system">
<div class="container">
<div class="row">
<div class="col-12">
<div class="all-blog-posts">
<center>
<div class="row">
<div class="col-lg-4">
<div class="blog-post">
<div class="blog-thumb">
<img src="articlepics/Fitness.jpg" alt="" class="article">
</div>
<div class="down-content">
 
<h4>Fitness</h4>
<ul class="post-info">
<li>Mohammad Al-Wazzan</li>
<li>3/11/2020</li>
</ul>
<div class="btn download" onclick="window.location='articlepdfs/Fitness.pdf';">
<div class="cloud">
<div class="arrow"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="blog-post">
<div class="blog-thumb">
<img src="articlepics/الأمير.jpg" alt="" class="article">
</div>
<div class="down-content">
 
<h4>الأمير الراحل … أمير الإنسانية</h4>
<ul class="post-info">
<li>Mohammad Al-Obaidi</li>
<li>3/10/2020</li>
</ul>
<div class="btn download" onclick="window.location='articlepdfs/الأمير الراحل … أمير الإنسانية.pdf';">
<div class="cloud">
<div class="arrow"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="blog-post">
<div class="blog-thumb">
<img src="articlepics/Uyghur.jpg" alt="" class="article">
</div>
<div class="down-content">
 
<h4>Uyghur Muslims</h4>
<ul class="post-info">
<li>Khalid Kooheji</li>
<li>27/9/2020</li>
</ul>
<div class="btn download" onclick="window.location='articlepdfs/Uyghur Muslims.pdf';">
<div class="cloud">
<div class="arrow"></div>
</div>
</div>
<div class="post-options">
<div class="row">
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="blog-post">
<div class="blog-thumb">
<img src="articlepics/Corona.jpg" alt="" class="article">
</div>
<div class="down-content">
 
<h4>Corona Virus: A New World</h4>
<ul class="post-info">
<li>Majed Al-Shaheen</li>
<li>27/9/2020</li>
</ul>
<div class="btn download" onclick="window.location='articlepdfs/Corona Virus A New World.pdf';">
<div class="cloud">
<div class="arrow"></div>
</div>
</div>
<div class="post-options">
<div class="row">
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="blog-post">
<div class="blog-thumb">
<img src="articlepics/اقرأ.jpg" alt="" class="article">
</div>
<div class="down-content">
 
<h4>التعلم عبادة</h4>
<ul class="post-info">
<li>Omar Sheir</li>
<li>23/9/2020</li>
</ul>
<div class="btn download" onclick="window.location='articlepdfs/التعلم عبادة.pdf';">
<div class="cloud">
<div class="arrow"></div>
</div>
</div>
<div class="post-options">
<div class="row">
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="blog-post">
<div class="blog-thumb">
<img src="articlepics/الصدقة.jpg" alt="" class="article">
</div>
<div class="down-content">
 
<h4>الصدقة</h4>
<ul class="post-info">
<li>Ahmad Al-Mazrouei</li>
<li>20/9/2020</li>
</ul>
<div class="btn download" onclick="window.location='articlepdfs/الصدقة.pdf';">
<div class="cloud">
<div class="arrow"></div>
</div>
</div>
<div class="post-options">
<div class="row">
</div>
</div>
</div>
</div>
</div>
</div>
</center>
</div>
</div>
</div>
</div>
</section>
</center>
What can I add to reduce the height?......................................................................................................我可以添加什么来降低高度?................................................ ………………………………………………………………………………………………………………………………………………………… …………
You have margins and paddings at the top and down.You can try these:顶部和底部都有边距和填充。你可以试试这些:
.blog-posts {
margin-top: 0;
}
.footer-distributed {
background-color: #2c292f;
box-sizing: border-box;
width: 100%;
text-align: left;
font: bold 16px sans-serif;
padding: 50px 50px 60px 50px;
margin-top: 0;
}
Oh thanks everyone I fixed it by changing哦,谢谢大家,我通过更改修复了它
.blog-posts .down-content {
padding: 0px;
border-right: 1px solid #eee;
border-left: 1px solid #eee;
border-bottom: 1px solid #eee;
min-height: 45em;
}
to到
.blog-posts .down-content {
padding: 0px;
border-right: 1px solid #eee;
border-left: 1px solid #eee;
border-bottom: 1px solid #eee;
min-height: 35em;
}
in my css file在我的 css 文件中
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.