9

次のコードがあります。

<div class="row">
    <div class="col-md-12">
        <div class="well">
            <div class="clearfix">
                <h2 class="pull-left">Heading</h2>
                <h4>Second Heading</h4>
           </div>
        </div>
     </div>
</div>


目標は、<h2>と<h4>を同じベース ライン上に並べることです。この時点で、<h4>要素は線の上にあります。

これをspansに入れようとしました、および のような他の「トリック」vertical-align: bottom。何らかの理由で、これを同じ行で取得できず、同じ「行の高さ」は次のようになります。

見出し2 番目の見出し

4

4 に答える 4

23

驚いたことに言及されていませんが、別の方法は見出しクラスを使用することです。

<span class="h2 pull-left">heading</span>
<span class="h4">second heading</span>

タイポグラフィ スタイルが適用されている以下のファイルを参照してください。display :block 以外に必要なものはすべてあります。

于 2014-10-20T11:41:00.663 に答える
5

Bootstrap には、<small>.

<h3>h3. Bootstrap heading <small>Secondary text</small></h3>

http://getbootstrap.com/css/#type-headings

于 2016-07-10T17:52:02.823 に答える
0

フィドルをチェックする

http://jsfiddle.net/VccZ6/2/

h2 に間違ったフロートがあり、ここに必要な残りの CSS があります。

.well h2, .well h4 {
    display: inline-block;
    vertical-align: baseline;
    line-height: 100%;
}

更新しました...

...これで十分です。

于 2013-09-08T14:03:06.183 に答える