23

問題

Twitterのブートストラップにbtnグループを使用して、テキストの左側にボタンを表示できるようにしたいと考えています。これが Twitter のブートストラップで既に利用可能かどうか、または css を追加する必要があるかどうかはわかりません。

私が持っているもの

現在、2 つのボタンで定義された 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>

私が試したこと

ここでいくつか試してみました。<p>タグを<div class="row">、ボタン用とテキスト用の 2 つのスパン 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 のブートストラップに既に組み込まれているものはありますか? そうでない場合、私はインライン クラスを作成する正しい軌道に乗っていましたか? その場合、なぜうまくいかなかったのですか?

アップデート

ボタン グループのプル レフト クラスについて提案してくれた RichardTowers に感謝します。ただし、さらにセットを追加すると (これが必要です)、次のようになります。 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の答えで提案されたようにしたので、基本的に私は.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 に答える