twitter-bootstrap Bootstrap 内联元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16002042/
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 Inline Elements
提问by Richard
So at the top of my page I have a title and a facebook logo. Here's a working example: fiddle
所以在我的页面顶部，我有一个标题和一个 facebook 标志。这是一个工作示例：小提琴
So everything is in a neat row at the top of the page. However, I want the logo and the text Join us on...to be on the right side, and the heading stays where it is. I've tried adding class="pull-right"to the 2nd and 3rd <li>elements, like this. But you can see how that really screws up the vertical alignment. Other than the alignment that's how I want it to look.
因此，所有内容都在页面顶部整齐排列。但是，我希望徽标和文本Join us on...位于右侧，而标题保持在原处。我试过添加class="pull-right"到第二个和第三个<li>元素，像这样。但是你可以看到这真的搞砸了垂直对齐。除了对齐之外，这就是我想要的样子。
Any ideas on how to fix the alignment?
关于如何修复对齐的任何想法？
采纳答案by ikumen
You can apply the pull-righton the li. Also, H4 will cause a break so, you should put the img and "Join Us..." inside the H4.
您可以将右拉式的li。此外，H4 会导致中断，因此您应该将 img 和“加入我们...”放在 H4 内。
Try this:
试试这个：
<ul class="inline">
<li><h3 class="muted">Heading</h3></li>
<li class="pull-right">
<div class="media">
<h4 class="media-heading">
<a href="#">
<img src="http://cache.boston.com/universal/site_graphics/facebook/facebook_logo_36x36.png" style="max-width:100%;" alt="Join us on Facebook" />
</a>
Join Us on Facebook
</h4>
</div>
</li>
</ul>
回答by tcgumus
you should add another element and give it "pull-right" class. Your join us code should be in that .
你应该添加另一个元素并给它“右拉”类。你加入我们的代码应该在那个。
So you should have like this;
所以你应该有这样的；
<ul>
logo
</ul>
<ul class="pull-right">
join us
</ul>
