css bootstrap 显示按钮内嵌文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11832250/
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
css bootstrap display button inline with text
提问by ndemoreau
I'm using twitter bootstrap.
我正在使用推特引导程序。
I'm trying to create a button with dropdown that should be displayed right after a text.
我正在尝试创建一个带有下拉菜单的按钮，该按钮应在文本后立即显示。
The button and everything are created but it appears on the next line instead of being on the same line as my texte.
按钮和所有内容都已创建，但它出现在下一行，而不是与我的文本在同一行。
This is more or less the code:
这或多或少是代码：
<h1> Some title
<div class="btn-group" xmlns="http://www.w3.org/1999/html">
<button class="btn btn-mini">Edit</button>
<button class="btn btn-mini dropdown-toggle data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li> ...my menu's...</li>
</ul>
</div>
</h1>
The h1 tag has no special positioning assigned. I've tried to add a float: left to the h1 tag but it doesn't work because there is a clear:both in the btn-group's css.
h1 标签没有分配特殊的定位。我试图添加一个 float: left 到 h1 标签，但它不起作用，因为在 btn-group 的 css 中有一个 clear:both 。
What's wrong? Thx!
怎么了？谢谢！
UPDATE:
更新：
I also tried to add a .pull-right class to the div. This brings it to the right line but it is on the right of the page. Not just after the text. This is too far away.
我还尝试向 div 添加一个 .pull-right 类。这会将它带到正确的行，但它位于页面的右侧。不只是在文本之后。这太远了。
回答by Sherbrow
I don't really know how you got that markup, but here is a working version : (demo on jsfiddle)
我真的不知道你是怎么得到那个标记的，但这是一个工作版本：（jsfiddle 上的演示）
<h1> Some title
<small>
<span class="btn-group">
<button class="btn btn-mini">Edit</button>
<button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">...my menus...</a></li>
</ul>
</span>
</small>
</h1>
h1 .btn-group { display: inline-block; }
I only suggest you to use the <small>tag, because it sets some different styles from <h1>. But it is not required for this to work.
我只建议你使用<small>标签，因为它设置了一些与<h1>. 但这不是必需的。
