twitter-bootstrap Bootstrap 页脚 - 如何将其向右对齐并提供间距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24935105/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap footer - How to align it to the right and give spacing
提问by J.Zil
This is my code:
这是我的代码：
<footer>
<p>? Company 2014</p><a href="#">Pricing</a><a href="#">Contact</a><a href="#">Terms</a>
</footer>
I'm trying to not only align the links to the right but also give each one a spacing so they are not directly next to each other.
我试图不仅将链接向右对齐，而且还给每个链接一个间距，这样它们就不会直接相邻。
I know I can float it right and give it isn't own CSS but im trying to avoid using custom CSS, is there any css classes or html markup I can add from bootstrap to get this effect without having to add custom rules?
我知道我可以正确浮动它并赋予它不是自己的 CSS 但我试图避免使用自定义 CSS，是否有任何 css 类或 html 标记我可以从引导程序添加以获得这种效果而无需添加自定义规则？
回答by Aibrean
See Bootplyfor a working example.
有关工作示例，请参阅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>
The list-inlineutility places everything in a single line using inline-blockwith extra padding. It is a Bootstrap utility.
该list-inline实用程序使用inline-block额外的填充将所有内容放在一行中。它是一个 Bootstrap 实用程序。
回答by neno
class pull-right will float them right
类 pull-right 将使它们向右浮动
<footer class="pull-right">
回答by Navas Basheer
The Class .pull-rightwill align the div into right corner
该类 .pull-right会将 div 对齐到右角
Try this
试试这个
<footer class="pull-right">
? Company 2014 | <a href="#">Pricing</a> | <a href="#">Contact</a> | <a href="#">Terms</a>
</footer>
This will solve your iniline display as well.
这也将解决您的内联显示问题。
Good Day
再会
回答by Dan
Try this
试试这个
CSS
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
HTML
<footer>
<p>? Company 2014</p>
<a href="#">Pricing</a>
<a href="#">Contact</a>
<a href="#">Terms</a>
</footer>
If you want the links to be on the same line as your <p>tag then just put the <a>tags within the <p>tag as shown here.
如果您希望链接与您的<p>标签在同一行，那么只需将<a>标签放入标签中，<p>如下所示。
