Bootstrap页脚 - 如何将其右对齐并添加间距

Question

这是我的代码：

<footer>
        <p>© Company 2014</p><a href="#">Pricing</a><a href="#">Contact</a><a href="#">Terms</a>
</footer>

我试图将链接不仅对齐到右侧，而且还要给每个链接添加间距，以便它们不会直接相邻。

我知道可以将其向右浮动并给它自己的CSS样式，但我试图避免使用自定义CSS，是否有任何Bootstrap的CSS类或HTML标记可以添加以获得此效果，而无需添加自定义规则？

- J.Zil

Answer 1

请查看Bootply以获取一个可运行的示例。

    <footer>
      <p class="pull-left">© Company 2014</p>
      <div class="pull-right">
          <ul class="list-inline">
             <li><a href="#">Pricing</a></li>
             <li><a href="#">Contact</a></li>
             <li><a href="#">Terms</a></li>
          </ul>
      </div>
    </footer>

list-inline实用程序使用inline-block和额外的填充将所有内容放在单行中。它是Bootstrap实用工具之一。

- Aibrean

Answer 2

class pull-right 会将它们向右浮动

<footer class="pull-right">

- neno

---

项目之间的间距，我应该将它们制作成列表，这样会给我留出间隔吗？ - J.Zil

同时，我只需要右侧的链接，而不是整个页脚。 - J.Zil

如果您想仅返回链接，请为它们中的每一个指定一个pull-right类<a href="#" class="pull-right">；如果您想要间距，则最好的方法是使用一些边距来制作CSS。 - neno

不要使用内联类...请查看我的使用CSS的答案。我刚更新了我的答案，仅将链接移到右侧。 - Dan

Answer 3

请试试这个

CSS样式表

footer a{
     float: right;
     margin-right: 30px;
     //you can adjust this margin to change spacing.  
     //you can also play around with using margin instead of margin-right
}

HTML

<footer>
     <p>© Company 2014</p>
     <a href="#">Pricing</a>
     <a href="#">Contact</a>
     <a href="#">Terms</a>
</footer>

Bootply演示

如果您希望链接与<p>标签在同一行，则只需将<a>标签放置在<p>标签内，如此处所示。

- Dan

Answer 4

使用类 .pull-right 可以将 div 对齐到右上角。

试一下这个：

<footer class="pull-right">
        © Company 2014 | <a href="#">Pricing</a> | <a href="#">Contact</a> | <a href="#">Terms</a>
</footer>

这将解决你的内联显示问题。

美好的一天。

- Navas Basheer

Answer 5

使用Bootstrap v5.0： https://getbootstrap.com/docs/5.0/utilities/float/

<div class="float-start"> </div>
<div class="float-end"> </div>
<div class="float-none"> </div>

- hardToExplain