Я работаю над проектом с использованием Django (2.1.7) и Bootstrap (3.1), мне нужно отобразить 3 записи в блоге в каждой строке:
Примечание: Я рассмотрел различные связанные вопросы, но не смог найти решения, относящегося к моей проблеме, поэтому не помечайте этот вопрос как дублированный, пожалуйста!
вот что я пробовал:
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="col-lg-9">
<div class="row">
{% for post in posts %}
<div class="col-lg-4 col-sm-6 mb-4" style="margin-top: 2%">
<div class="card shadow border-0 h-100"><a href="post.html">
<img src="{{ post.photo.url }}"
alt="..." class="img-fluid card-img-top"></a>
<div class="card-body"><a href="{% url 'blog-post' post.id %}"
class="text-uppercase text-muted text-sm letter-spacing-2">{{ post.category }} </a>
<h5 class="my-2"><a href="post.html" class="text-dark">{{ post.title }}</a></h5>
<p class="text-gray-500 text-sm my-3"><i class="far fa-clock mr-2"></i>{{ post.created_at }}</p>
<p class="my-2 text-muted text-sm">{{ post.content }}</p><a
href="{% url 'blog-post' post.id %}" class="btn btn-link pl-0">Read more<i
class="fa fa-long-arrow-alt-right ml-2"></i></a>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
<div class="col-lg-3" style="background-color: darkgrey; height: 100%">
<div class="container">
<form class="form" style="margin-top: 3%">
<input type="search" name="search" />
<button type="submit">Search</button>
</form>
</div>
</div>
</div>
</div>
</div>
А вот CSS для некоторых из этих элементов:
.card-img-top {
width: 100%;
border-top-left-radius: calc(.4rem - 1px);
border-top-right-radius: calc(.4rem - 1px);
}
img {
vertical-align: middle;
border-style: none;
}
.img-fluid {
max-width: 100%;
height: auto;
max-height: 200px;
min-height: 200px;
}
.card-body {
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding: 1.25rem;
}
@media (min-width: 992px){
.col-lg-4 {
-ms-flex: 0 0 33.33333%;
flex: 0 0 33.33333%;
max-width: 33.33333%;
}
}
.h-100 {
height: 100% !important;
}
.shadow {
box-shadow: 0 0 1rem rgba(0,0,0,0.15) !important;
}
.border-0 {
border: 0 !important;
}
.card {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0,0,0,0.125);
border-radius: .4rem;
}
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -12px;
margin-left: -15px;
}
В safari внутри первого ряда, он отображает только 2 сообщения в блоге, но в других строках он отображает 3 сообщения в блоге, см. Скриншот ниже:
Обновление: Ниже сгенерированный HTML, взятый из браузера:
<div class="col-lg-9">
<div class="row">
<div class="col-lg-4 col-sm-6 mb-4" style="margin-top: 2%">
<div class="card shadow border-0 h-100"><a href="post.html">
<img src="/media/blog_images/automation_image.jpg" alt="..." class="img-fluid card-img-top"></a>
<div class="card-body"><a href="/blog/post/1" class="text-uppercase text-muted text-sm letter-spacing-2">Travel </a>
<h5 class="my-2"><a href="post.html" class="text-dark">This is the First Blog</a></h5>
<p class="text-gray-500 text-sm my-3"><i class="far fa-clock mr-2"></i>March 7, 2019, 6:11 a.m.</p>
<p class="my-2 text-muted text-sm">This is the very first blog.</p><a href="/blog/post/1" class="btn btn-link pl-0">Read more<i class="fa fa-long-arrow-alt-right ml-2"></i></a>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-4" style="margin-top: 2%">
<div class="card shadow border-0 h-100"><a href="post.html">
<img src="/media/blog_images/freelance-dev-business.png" alt="..." class="img-fluid card-img-top"></a>
<div class="card-body"><a href="/blog/post/2" class="text-uppercase text-muted text-sm letter-spacing-2">DEFAULT </a>
<h5 class="my-2"><a href="post.html" class="text-dark">Second Blog Post</a></h5>
<p class="text-gray-500 text-sm my-3"><i class="far fa-clock mr-2"></i>March 7, 2019, 6:14 a.m.</p>
<p class="my-2 text-muted text-sm">This is the second one.</p><a href="/blog/post/2" class="btn btn-link pl-0">Read more<i class="fa fa-long-arrow-alt-right ml-2"></i></a>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-4" style="margin-top: 2%">
<div class="card shadow border-0 h-100"><a href="post.html">
<img src="/media/blog_images/machine-learning-apprentissage-supervise-ou-non-et-par-renforcement-hli-lab.jpg" alt="..." class="img-fluid card-img-top"></a>
<div class="card-body"><a href="/blog/post/3" class="text-uppercase text-muted text-sm letter-spacing-2">LIVING </a>
<h5 class="my-2"><a href="post.html" class="text-dark">Third Post</a></h5>
<p class="text-gray-500 text-sm my-3"><i class="far fa-clock mr-2"></i>March 7, 2019, 6:12 a.m.</p>
<p class="my-2 text-muted text-sm">This is the third blog post.</p><a href="/blog/post/3" class="btn btn-link pl-0">Read more<i class="fa fa-long-arrow-alt-right ml-2"></i></a>
</div>
</div>
</div>
</div><!-- close existing row and open another one-->
<div class="row">
<div class="col-lg-4 col-sm-6 mb-4" style="margin-top: 2%">
<div class="card shadow border-0 h-100"><a href="post.html">
<img src="/media/blog_images/skills.jpg" alt="..." class="img-fluid card-img-top"></a>
<div class="card-body"><a href="/blog/post/4" class="text-uppercase text-muted text-sm letter-spacing-2">Support </a>
<h5 class="my-2"><a href="post.html" class="text-dark">Another One</a></h5>
<p class="text-gray-500 text-sm my-3"><i class="far fa-clock mr-2"></i>March 7, 2019, 6:12 a.m.</p>
<p class="my-2 text-muted text-sm">This is another one.</p><a href="/blog/post/4" class="btn btn-link pl-0">Read more<i class="fa fa-long-arrow-alt-right ml-2"></i></a>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-4" style="margin-top: 2%">
<div class="card shadow border-0 h-100"><a href="post.html">
<img src="/media/blog_images/JobExpert.jpg" alt="..." class="img-fluid card-img-top"></a>
<div class="card-body"><a href="/blog/post/5" class="text-uppercase text-muted text-sm letter-spacing-2">Medical </a>
<h5 class="my-2"><a href="post.html" class="text-dark">Fifth</a></h5>
<p class="text-gray-500 text-sm my-3"><i class="far fa-clock mr-2"></i>March 7, 2019, 7:43 a.m.</p>
<p class="my-2 text-muted text-sm">This is the fifth post on this blog.This is the fifth post on this blog.This is the fifth post on this blog.This is the fifth post on this blog.This is the fifth post on this blog.This is the fifth post on this blog.This is the fifth post on this blog.This is the fifth post on this blog.This is the fifth post on this blog.This is the fifth post on this blog.This is the fifth post on this blog.This is the fifth post on this blog.This is the fifth post on this blog.This is the fifth post on this blog.This is the fifth post on this blog.This is the fifth post on this blog.This is the fifth post on this blog.This is the fifth post on this blog.This is the fifth post on this blog.This is the fifth post on this blog.</p><a href="/blog/post/5" class="btn btn-link pl-0">Read more<i class="fa fa-long-arrow-alt-right ml-2"></i></a>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-4" style="margin-top: 2%">
<div class="card shadow border-0 h-100"><a href="post.html">
<img src="/media/blog_images/IMG_1832.jpg" alt="..." class="img-fluid card-img-top"></a>
<div class="card-body"><a href="/blog/post/6" class="text-uppercase text-muted text-sm letter-spacing-2">Support </a>
<h5 class="my-2"><a href="post.html" class="text-dark">Sixth</a></h5>
<p class="text-gray-500 text-sm my-3"><i class="far fa-clock mr-2"></i>March 7, 2019, 6:12 a.m.</p>
<p class="my-2 text-muted text-sm">This is the sixth blog post here at BRT site.</p><a href="/blog/post/6" class="btn btn-link pl-0">Read more<i class="fa fa-long-arrow-alt-right ml-2"></i></a>
</div>
</div>
</div>
</div><!-- close existing row and open another one-->
<div class="row">
</div>
</div>
что тут может быть не так? Я новичок в Bootstrap.
Заранее спасибо!