Question

我有一些页脚链接。我想在彼此之间留出一些额外的间隔，但是现在最后一项转到下一行。

我认为重要的是要注意我正在使用Bootstrap 4，并且Left Col设置为col-md-8，因此有足够的空间用于链接。

Codepen

演示

ul>li {
  display: inline-block;
  /* You can also add some margins here to make it look prettier */
  zoom: 1;
  *display: inline;
  /* this fix is needed for IE7- */
}

.footer_text {
  font-size: 12px;
  font-weight: bold;
  letter-spacing: .2em;
  padding: 0px;
  margin: 0px;
}

.footer_nav_links {
  margin-right: 2%;
}

.footer_icons {
  font-size: 18px;
  color: grey;
}

<div id="footer-navbar" class="container-fluid footer_text">
  <div id="footer-navbar" class="container row footer navbar-fixed-bottom padding-top2 my-0 mx-auto padding-bottom2 ">
    <div class="col-md-8">
      <div class="">

        <nav class="">
          <div class="mx-auto d-sm-flex d-block flex-sm-nowrap">

            <ul class="">
              <li class="footer_nav_links">
                <a class="" href="{% url 'shop:quienes_somos' %}">¿Quiénes somos?</a>
              </li>
              <li class="footer_nav_links">
                <a class="" href="{% url 'shop:como_comprar' %}">¿Cómo comprar?</a>
              </li>
              <li class="footer_nav_links">
                <a class="" href="{% url 'shop:contactanos' %}">Contáctanos</a>
              </li>
            </ul>

          </div>
        </nav>

        <ul class="left footer-links footer-interact hidden-md-down">
          <li><a href="https://twitter.com/stickersgallito" rel="nofollow noopener" target="_blank" title="Twitter"><i class="fab fa-twitter footer_icons"></i></i></a></li>
          <li><a href="https://www.instagram.com/stickersgallito" rel="nofollow noopener" target="_blank" title="Instagram"><i class="fab fa-instagram footer_icons"></i></i></a></li>
          <li><a href="https://facebook.com/stickersgallito" rel="nofollow noopener" target="_blank" title="Facebook"><i class="fab fa-facebook-square footer_icons"></i></i></a></li>
          <li><a href="https://www.youtube.com/user/stickersgallito" rel="nofollow noopener" target="_blank" title="YouTube"><i class="fab fa-youtube footer_icons"></i></i></a></li>
        </ul>
      </div>

    </div>

    <div class="col-md-4 text-right">

      <div class="">
        <p><img src="{% static 'img/home/peru-flag.png' %}" width="40px" height="40px">Perú</p>
      </div>

      <div class="right footer-legal">
        <span>&copy; 2019 StickersGallito</span>
        <a href="/legal/privacy">Privacy</a> &amp; <a href="/legal/terms">Terms</a>

      </div>

    </div>
  </div>
</div>

</div>
</div>

Answer 1

是的。左列设置为col-md-8，并且有足够的空间。但是作为所有ul的父项的footer_nav_links标签的宽度较小。您可以为width: 100%标签添加ul，以使其宽度等于其父标签的宽度，这将为页脚标签打开空间。

修改后的Codepen https://codepen.io/anon/pen/BeeNzY

添加保证金右边的％将最后一项放到下一行

1 个答案: