css - Bootstrap 3 -- すべてのテキストを下部に揃えながら、同じ行で異なるフォント サイズを使用する方法

Question

私はブートストラップが初めてです。同じ行に 2 列のテキストを配置したいのですが、最初の列のフォントが 2 番目の列よりも大幅に大きくなっています。これを行うと、2 列目のテキストが 1 行目よりも高く表示されます。両方の列のテキストを下に揃えたいと思います。

これが現在どのように見えるかの例です。「Atlanta」は、「John Doe」という名前よりも垂直方向にかなり高く配置されていることに注意してください http://bootply.com/83705

Answer 1

アップデート

<div class="container"> 
     <div class="row" style="border-bottom: 1px solid red;">
        <div class="col-xs-2" style="font-size:35px;">John Doe</div>
        <div class="col-xs-2" style=""><span style="font-size:35px;"></span>Atlanta</div>
      </div>
</div>  

--

あなたの質問が Bootstrap (Bootstrapで div をフロートさせる) と関係があるかどうかはわかりません。

パディングを追加してみてください。

<div class="container"> 
     <div class="row" style="border-bottom: 1px solid red;">
        <div class="col-xs-2" style="font-size:35px;">John Doe</div>
        <div class="col-xs-2" style="padding-top:21px;">Atlanta</div>
      </div>
</div>

Answer 2

頭のてっぺんに思いつく 2 つの方法

1番目: 列を使用せず、代わりに「display-inline」を使用してください

.inline { display: inline-block !important; }

テーマによっては、必要になる場合もあります

.align-bottom { vertical-align: bottom !important }

そのためのブートストラップ クラスさえあるかもしれません。私はこれしか見つけることができませんでした：

ブートストラップ 2.3.2

<ul class="inline">
  <li>...</li>
</ul>

ブートストラップ 3

<ul class="list-inline">
  <li>...</li>
</ul>

デモ: http://www.bootply.com/nba6HcSDll

2番目：列を使用する必要がある場合は、これを確認してください

等高列のデモ: http://www.minimit.com/demos/bootstrap-3-responsive-columns-of-same-height