Question

我的完整代码：

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<footer class="app-footer">
  <span class="footer-icon"></span>
  <ul class="list-inline">
    <li class="list-inline-item">
      <a class="text-muted" href="mailto:support@aerofiler.com" target="_blank">Contact Us </a>
    </li>
    <li class="list-inline-item">
      <a class="text-muted" href="https://aerofiler.zendesk.com" target="_blank">Help </a>
    </li>
    <li class="list-inline-item">
      <a class="text-muted" href="http://www.aerofiler.com/terms">Terms </a>
    </li>
    <li class="list-inline-item">
      <a class="text-muted" href="http://www.aerofiler.com/privacy">Privacy </a>
    </li>
  </ul>
</footer>

这是用无序列表实现的页脚，例如：

    <ul class="list-inline">
      <li class="list-inline-item">
        <a class="text-muted" href="mailto:support@aerofiler.com" target="_blank">Contact Us </a>
      </li>
    ...

与众不同的功能是列表从左到右，而不是从上到下。

如何增加每个列表项之间的间距？换句话说，如何使“联系我们”和“帮助”之间的差距更大？

Answer 1

为Typography使用预定义的引导程序类

假设您可以使用class =“ mt-1”作为保证金顶部

边距下限（mb-1），左（ml-1）和右（mr-1）的范围为1-9

Answer 2

向li添加填充：

 li{
    padding-right:1rem;
   }

Answer 3

为项目添加保证金权利

.list-inline-item{
  margin-right:10px;
}

在Bootstrap中，如何增加列表项之间的间距？

3 个答案: