【发布时间】：2020-10-25 00:35:12
【问题描述】：
我试图通过使（趋势项）在移动宽度中显示为 2 而不是 1 来使我的部分具有响应性。我打算有 20 件物品让它变得很长，而且网站没有那么吸引人。我很乐意帮助制作它们 2。谢谢。
.trending
{
width: 100%;
padding-top: 105px;
padding-bottom: 50px;
}
.trending_container
{
margin-top: 90px;
}
.trending_item
{
margin-bottom: 55px;
}
.trending_image
{
width: 82px;
height: 76px;
float: left;
}
.trending_image img
{
width: 100%;
}
.trending_content
{
padding-left: 94px;
}
.trending_title
{
margin-top: -5px;
}
.trending_title a
{
font-size: 14px;
font-weight: 700;
color: #2d2c2c;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.trending_title a:hover
{
color: #fa9e1b;
}
.trending_price
{
font-size: 14px;
font-weight: 700;
color: #fa9e1b;
}
.trending_location
{
font-size: 14px;
font-weight: 400;
color: #929191;
text-transform: uppercase;
margin-top: 2px;
}
.clearfix::before, .clearfix::after
{
content: "";
display: table;
}
.clearfix::after
{
clear: both;
}
.clearfix
{
zoom: 1;
}
@media only screen and (max-width: 575px)
{
.trending_title a
{
font-size: 14px;
}
.trending_price
{
font-size: 12px;
}
.trending_location
{
font-size: 12px;
}
.offers_image_container
{
height: calc((100vw - 30px) / 0.974);
}
.trending_item
{
margin-bottom: 30px;
}
.trending {
position: static;}
} <div class="trending">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<p class="title-bg-small wow fadeInUp" data-wow-duration="1.5s" data-wow-delay="300ms">Activities</p>
<h3 class="section-title wow fadeInUp" data-wow-duration="1.5s" data-wow-delay="400ms">What to do in
<span>Nairobi</span></h3>
<p style="color: #414240;"> Enquire for any of the activities and a tour guide will be designated to ensure smooth travelling and execution
of all activities done to perfection.
</p>
</div>
</div>
<div class="row trending_container">
<!-- Trending Item -->
<div class="col-md-3">
<div class="trending_item clearfix">
<div class="trending_image"><img src="https://images.unsplash.com/photo-1465311354905-789ff5f7a457?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="https://unsplash.com/@fransaraco"></div>
<div class="trending_content">
<div class="trending_title"><a href="#">Shopping at Maasai Market</a></div>
<div class="trending_price">From $182</div>
<div class="trending_location">madrid, spain</div>
</div>
</div>
</div>
<!-- Trending Item -->
<div class="col-md-3">
<div class="trending_item clearfix">
<div class="trending_image"><img src="https://images.unsplash.com/photo-1465311354905-789ff5f7a457?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="https://unsplash.com/@grovemade"></div>
<div class="trending_content">
<div class="trending_title"><a href="#">Nairobi National Park Game Drive</a></div>
<div class="trending_price">From $182</div>
<div class="trending_location">madrid, spain</div>
</div>
</div>
</div>
<!-- Trending Item -->
<div class="col-md-3">
<div class="trending_item clearfix">
<div class="trending_image"><img src="https://images.unsplash.com/photo-1465311354905-789ff5f7a457?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="https://unsplash.com/@jbriscoe"></div>
<div class="trending_content">
<div class="trending_title"><a href="#">queen hotel</a></div>
<div class="trending_price">From $182</div>
<div class="trending_location">madrid, spain</div>
</div>
</div>
</div>
<!-- Trending Item -->
<div class="col-md-3">
<div class="trending_item clearfix">
<div class="trending_image"><img src="https://images.unsplash.com/photo-1465311354905-789ff5f7a457?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="https://unsplash.com/@oowgnuj"></div>
<div class="trending_content">
<div class="trending_title"><a href="#">mars hotel</a></div>
<div class="trending_price">From $182</div>
<div class="trending_location">madrid, spain</div>
</div>
</div>
</div>
<!-- Trending Item -->
<div class="col-md-3">
<div class="trending_item clearfix">
<div class="trending_image"><img src="https://images.unsplash.com/photo-1465311354905-789ff5f7a457?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="https://unsplash.com/@mindaugas"></div>
<div class="trending_content">
<div class="trending_title"><a href="#">grand hotel</a></div>
<div class="trending_price">From $182</div>
<div class="trending_location">madrid, spain</div>
</div>
</div>
</div>
<!-- Trending Item -->
<div class="col-md-3">
<div class="trending_item clearfix">
<div class="trending_image"><img src="https://images.unsplash.com/photo-1465311354905-789ff5f7a457?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="https://unsplash.com/@itsnwa"></div>
<div class="trending_content">
<div class="trending_title"><a href="#">mars hotel</a></div>
<div class="trending_price">From $182</div>
<div class="trending_location">madrid, spain</div>
</div>
</div>
</div>
<!-- Trending Item -->
<div class="col-md-3">
<div class="trending_item clearfix">
<div class="trending_image"><img src="https://images.unsplash.com/photo-1465311354905-789ff5f7a457?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="https://unsplash.com/@rktkn"></div>
<div class="trending_content">
<div class="trending_title"><a href="#">queen hotel</a></div>
<div class="trending_price">From $182</div>
<div class="trending_location">madrid, spain</div>
</div>
</div>
</div>
<!-- Trending Item -->
<div class="col-md-3">
<div class="trending_item clearfix">
<div class="trending_image"><img src="https://images.unsplash.com/photo-1465311354905-789ff5f7a457?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"></div>
<div class="trending_content">
<div class="trending_title"><a href="#">mars hotel</a></div>
<div class="trending_price">From $182</div>
<div class="trending_location">madrid, spain</div>
</div>
</div>
</div>
</div>
</div>
</div>【问题讨论】：
-
您使用的是哪个版本的引导程序？
-
很难理解你的真正意思。你能画出你喜欢的布局吗？
-
@j08691 我正在使用 Bootsatrap 4.1.3 版
标签： html css twitter-bootstrap bootstrap-4