时间戳

首页 > 解决方案 > 轮播指示器的边距顶部不起作用引导程序

html - 轮播指示器的边距顶部不起作用引导程序

问题描述

我用 bootstrap 4 做了一个旋转木马，如下所示：

{% if events %}
<div class="text-center my-3">

  <h3 class="font-weight-bold pb-4 mb-0 text-center">Events</h3>

  <div class="carousel slide my-4" data-interval="false" id="carousel-1">

    <div class="carousel-inner">

      {% for item in events %}
        <div
            {% if forloop.counter0 == 0 %}
              class="carousel-item active  "
            {% else %}
              class="carousel-item  "
            {% endif %}>

            <div class="row">
              <div class="col-xs-12 col-sm-12 col-md-5 col-lg-5 col-xl-5 ml-auto">

                <div class="text-right  ">

                  <a class="text-dark"  href="{% url 'events' %}">

                    <div>

                      <h3 class="text-dark" >{{ item.title }}</h3>
                      <p class="text-dark" style="color: #F4F4F4;" > {{item.date}} </p>
                      <p class="text-dark" > {{item.description|safe}} </p>

                    </div>

                  </a>
                </div>

              </div>

              <div class="col-xs-12 col-sm-12 col-md-5 col-lg-5 col-xl-5 mr-auto">
                <img class="img-fluid text-center"  style="max-height: 25vh;" src="{{ item.cover.url }}" alt="image cap">
              </div>
            </div>


        </div>
      {% endfor %}

    </div>

    <div>
      <a class="carousel-control-prev" href="#carousel-1" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"><i class="text-dark fas fa-chevron-left"></i></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#carousel-1" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"><i class="text-dark fas fa-chevron-right"></i></span>
            <span class="sr-only">Next</span>
      </a>
    </div>

    <ol class="carousel-indicators">
        {% for item in events %}
        <li data-target="#carousel-1" data-slide-to="{{ forloop.counter0 }}"
          {% if forloop.counter0 == 0 %}
            class="active text-dark"
          {% else %}
            class="text-dark"
          {% endif %}
        ></li>
        {% endfor%}
    </ol>

  </div>

</div>
{% endif %}

我希望轮播指示器有一个上边距，这样它就不会与内容重叠。由于我没有显示图像，因此如果它们覆盖内容，则指示符不适合。我添加了

<style>
.carousel-indicators{
    margin-top: 50px;
  }
</style>

但它不工作。

我还尝试将 margin-top 添加到 bootstrap.min.css，但它也不起作用。

有任何想法吗？

标签： htmlcssbootstrap-4carousel

解决方案

.carousel-indicators元素绝对定位在上边距的底部，因此.carousel上边距不会做任何事情。而是用负值覆盖 的bottom值以将其移动到0.carousel

.carousel-indicators{
  bottom: -50px;
}

推荐阅读