0

以下にリンクされている Web ページでは、ラベルを使用して、「専門分野は何ですか!」という見出しの下にあるアイテムの垂直リストを表示しようとしています。デフォルトの要素はラベルを表示するためのスパンですが、複数のラベルが同じ行に積み重なっています。これは視覚的に実現したいことではありません。実際には、各ラベルが個々の行を占めることを望んでいます。(これはおそらくdisplay: inline-block;CSS ルールに関係していますか?)。これを支援するためのマークアップまたは CSS プロパティの変更はありますか?

http://openreachmarketing.co.uk/index.php

  <span class="odd label label-info">Accident Compensation</span>
  <span class="even label label-warning">PPI</span>
  <span class="odd label label-important">Buildings and Contents Insurance</span>
  <span class="even label label-info">Utility Switches</span>
  <span class="odd label label-warning">Car Loans</span>
  <span class="even label label-important">Solar Panels</span>

ブートストラップ ラベルのドキュメントは次のとおりです。

http://twitter.github.com/bootstrap/components.html#labels-バッジ

4

1 に答える 1

0

あなたはh4見出しを持っています！

<h4 class="heading">What we specialise in!</h4>

私たちが得意とすること！期待どおりに動作しています。しかし、それを のように表示したい場合はlabel、そこのスタイルをクリアして、H4このマークアップを付けます。

<h4><span class="label">What we specialise in!</span></h4>

または

<h4><span class="odd label label-info">What we specialise in!</span></h4>

その他の例: 事故補償 PPI 建物およびコンテンツ保険 ユーティリティ スイッチ 車のローン ソーラー パネルなどは正常に機能しています。

複数行表示用CSS！

.span4.margbot20 .label {
    float: left;
    clear: both;
    margin: 0 0 5px;
}

スクリーンショット

マークアップの変更のみ

<p><span class="odd label label-info">Accident Compensation</span></p>
<p><span class="even label label-warning">PPI</span></p>
<p><span class="odd label label-important">Buildings and Contents Insurance</span></p>
<p><span class="even label label-info">Utility Switches</span></p>
<p><span class="odd label label-warning">Car Loans</span></p>
<p><span class="even label label-important">Solar Panels</span></p>
于 2013-01-01T15:26:31.003 に答える