Question

我从themeforest获得了一个模板。网站底部附近有一些盒子（全球交付等）

当我把它变小时，它们会消失，有人知道我怎么能让它们堆叠在一起吗？

这是模板：http://pixelgeeklab.com/demo/wordpress/flatize/?page_id=579

关于这一部分：

<div class="wpb_text_column wpb_content_element ">
    <div class="wpb_wrapper">
        <ul class="wp-ads">
            <li><i class="fa fa-plane"></i><strong>Delivery worldwide</strong>See all conditions</li>
            <li><i class="fa fa-refresh"></i><strong>30 days returns</strong>For a smooth shopping</li>
            <li><i class="fa fa-phone"></i><strong>0123 456 789</strong>Contact Customer</li>
            <li><i class="fa fa-lock"></i><strong>30 days returns</strong>For a smooth shopping</li>
            <li><i class="fa fa-question-circle"></i><strong>Shopping Guide</strong>Contact Customer</li>
        </ul>
    </div>
</div>

Answer 1

它消失的原因是因为它在<section class="section-element hidden-xs">内，所以display none width < 767px时hidden-xs。您应该删除课程@media (max-width: 767px){ .wp-ads li { background: #1abc9c; color: white; display: block; float: none; overflow: hidden; padding: 20px 0 20px 25px; width: 20%; } }。

并添加此css代码。

width

您可能希望在视图较小时增加@media (max-width: 767px){ .wp-ads li { background: #1abc9c; color: white; display: block; float: none; overflow: hidden; padding: 20px 0 20px 5%; width: 90%; } }。

例如：

{{1}}

Answer 2

查看css，如果我理解你的话，你只需要禁用li元素的浮动并使它们显示为堆栈，对吧？

看看有关第1497行的template.css：

.wp-ads li {
  background: #1abc9c;
  color: white;
  display: inline-block;
  float: left;
  overflow: hidden;
  padding: 20px 0 20px 25px;
  width: 20%;
}

将其更改为

.wp-ads li {
  background: #1abc9c;
  color: white;
  /* display: inline-block; */
  /* float: left; */
  overflow: hidden;
  padding: 20px 0 20px 25px;
  width: 20%;
}

将5个列表项堆叠在一起

2 个答案: