23

问题

我希望能够将 btn 组用于 twitter 引导程序，并将按钮显示在某些文本的左侧。不确定这是否已经在 twitter bootstrap 中可用，或者我是否需要添加一些 css。

是）我有的

我目前有一个用两个按钮定义的 btn 组。然后我在按钮后面有一串文本。 

<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>

我试过的

我在这里尝试了一些东西。我将<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>

并在css中定义.inline {display:inline-block; zoom:1; *display: inline;}但是这也不起作用。这就是我得到的。如您所见，文本显示在按钮组下方。我想要按钮组右侧的文本。

以上给了我什么

问题

我该怎么做才能让按钮组显示在字符串的右侧？twitter bootstrap 中是否已经为此内置了一些东西，如果有的话？如果不是，我是否在创建内联类的正确轨道上，如果是这样，为什么它不起作用？

更新

感谢 RichardTowers 对按钮组上的 pull-left 类的建议。但是，当添加更多集（需要）时，我得到以下信息： 向 btn-group 添加了 pull-left 类

我认为这是因为浮动。这是正确的，我将如何解决它？

4

4 回答 4

18

戴上pull-left按钮 div：http: //jsfiddle.net/dbTqC/653/

我认为这只是设置float: left，所以你需要清除它下面的东西。有一clearfix堂课。

有必要查看一些 CSS 资源，以便了解这里发生了什么。

于 2012-06-29T16:10:08.560 回答
9 
<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>
于 2012-11-20T20:30:49.653 回答
5

这有效：

<p>Hello <span class="btn-group">...</span></p>
于 2013-04-11T15:03:51.207 回答
4

我按照这个 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 用法：

<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>

和最终结果：

工具栏中的标题

于 2013-03-07T11:40:08.490 回答