Question

这是我的代码：

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

我试图不仅将链接对齐到右边，而且还给每个链接一个间距，这样它们就不会直接相邻。

我知道我可以正确地浮动它并且给它不是自己的CSS但我试图避免使用自定义CSS，是否有任何css类或html标记我可以从bootstrap添加以获得此效果而无需添加自定义规则？

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实用程序。

Answer 2

类拉 - 右将浮动它们

<footer class="pull-right">

Answer 3

班级.pull-right会将div对齐到右上角

试试这个

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

这也将解决您的苯胺显示问题。

美好的一天

Answer 4

试试这个

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 Demo

如果您希望链接与<p>代码位于同一行，则只需将<a>代码放在<p>代码中shown here。

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>

Bootstrap页脚 - 如何将其对齐并给出间距

5 个答案: