html - 添加 margin-right % 将最后一项放在下一行

Question

我有一组页脚链接。我想在彼此之间放置一些额外的间距，但现在最后一项转到下一行。

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

密码本

https://codepen.io/anon/pen/GaaJRm

演示

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

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

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