CSS 显示 twitter bootstrap btn-group 内嵌文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11264897/
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
Display twitter bootstrap btn-group inline with text
提问by bretterer
Problem
问题
I want to be able to use btn group for twitter bootstrap and have the buttons show to the left of some text. Not sure if this is already available in twitter bootstrap or if I need to add some css.
我希望能够将 btn 组用于 twitter 引导程序，并将按钮显示在某些文本的左侧。不确定这是否已在 twitter bootstrap 中可用，或者我是否需要添加一些 css。
What I Have
我拥有的
I currently have a btn-group defined with two buttons. I then have after the buttons a string of text.
我目前有一个用两个按钮定义的 btn-group。然后我在按钮之后有一串文本。
<p>
<div class="btn-group" data-toggle="buttons-checkbox">
<div class="btn btn-small">BTN Text 1</div>
<div class="btn btn-small">BTN Text 2</div>
</div>
String to display after buttons on same line
</p>
What I have tried
我试过的
I have tried a few things here. I modified the <p>tag to be a <div class="row">with two span divs one for the buttons and one for the text but this did not work. I also tried the following:
我在这里尝试了一些东西。我将<p>标签修改为<div class="row">带有两个跨度 div，一个用于按钮，一个用于文本，但这不起作用。我还尝试了以下方法：
<div>
<div class="btn-group inline" data-toggle="buttons-checkbox">
<div class="btn btn-small">BTN Text 1</div>
<div class="btn btn-small">BTN Text 2</div>
</div>
<span class="inline">String to display after buttons on same line</span>
</div>
and defined in the css .inline {display:inline-block; zoom:1; *display: inline;}However this did not work either. This is what I am getting. As you can see the text is displaying below the button group. I want the text to the right of the button group.
并在 css 中定义.inline {display:inline-block; zoom:1; *display: inline;}但是这也不起作用。这就是我得到的。如您所见，文本显示在按钮组下方。我想要按钮组右侧的文本。
Question
题
What can I do to get the button group to display to the right of the string? Is there something already built into twitter bootstrap for this, if so what? If not, was I on the right track of creating an inline class, if this is the case, why did it not work?
我该怎么做才能让按钮组显示在字符串的右侧？是否已经在 twitter bootstrap 中内置了一些东西，如果有的话？如果不是，我是否在创建内联类的正确轨道上，如果是这种情况，为什么它不起作用？
Update
更新
Thank you RichardTowers for the suggestion on the pull-left class on the button group. However when adding more sets (which is needed) I get the following:
感谢 RichardTowers 对按钮组上的 pull-left 类的建议。但是，当添加更多集（这是必需的）时，我得到以下信息：
I assume that this is because of floating. Is this correct and how would I fix it?
我认为这是因为浮动。这是正确的，我将如何解决它？
采纳答案by RichardTowers
Put pull-lefton the buttons div: http://jsfiddle.net/dbTqC/653/
放上pull-left按钮div：http: //jsfiddle.net/dbTqC/653/
I think this just sets float: left, so you'll need to clear things below it. There's a clearfixclass for this.
我认为这只是设置float: left，所以你需要清除它下面的东西。有一个clearfix课程。
It's worth having a look at some CSS resourcesso that you understand what's happening here.
值得查看一些 CSS 资源，以便您了解此处发生的情况。
回答by Mark
<p class="btn-toolbar">
<span class="btn-group">
<a href="#" class="btn">Button 1</a>
</span>
<span class="btn-group">
<a class="btn" href="#">Button 2</a>
<a class="btn" href="#">Button 3</a>
</span>
<span class="btn-group">Text here.</span>
</p>
回答by superjos
I did as suggested in this SO answer, so basically I started off of .navbar .brandstyle and adapted a little bit.
If interested, here is my changed style:
我按照this SO answer中的建议做了，所以基本上我从.navbar .brand风格开始并进行了一些调整。
如果有兴趣，这是我改变的风格：
/* See .navbar .brand style in bootstrap.css for a reference */
.btn-toolbar .title {
display: block;
float: left;
margin-top: -4px; /* Recover part of margin set in child Header nodes */
margin-left: 10px;
font-size: 20px;
font-weight: 200;
color: #777777;
text-shadow: 0 1px 0 #ffffff;
}
HTML usage:
HTML 用法：
<div class="btn-toolbar">
<div class="btn-group pull-left">
<a class="btn" href="#/search">Search...</a>
</div>
<div class="title">
<h4>View offers</h4>
</div>
<div class="btn-group pull-right">
<a class="btn" href="#/batchDelete">Delete ...</a>
<a class="btn" href="#/new">New</a>
</div>
</div>
and end result:
和最终结果：
回答by Geoffrey De Smet
This works:
这有效：
<p>Hello <span class="btn-group">...</span></p>
