ブートストラップCSSスタッキングテキスト

Question

私はブートストラップカラムにテキストをスタックしようとしていますが、どうやってそれをやっていくのか分かりません。

ここで私が達成しようとしているものの粗製のモックアップだ：

は、最初の単語3「代」は、それぞれ1行ありながら、「」、2行を取る必要があります。また、 "SOMETHINGS"を別の言葉であれば同じ長さに伸ばす方法もありますか？

<div class="row"> 
     <div class="col-lg-6"> 
      <img class="img-responsive" src="img/logo.png"</img> 
     </div> 
     <div class="col-lg-6"> 
      THE SOMETHING SOMETHING SOMETHING 
     </div> 
    </div> 

Answer 1

以下は、ブートストラップカラムを使用する必要がある場合の開始です。あなたは、列のサイズやフォントやテキスト使用を調整した場合は、その後、フォントサイズ、ラインの高さと文字間隔値を調整します。

フォントサイズが主に垂直に表示され、縦線で補助された行の高さと文字の間隔がテキストの水平間隔に役立ちました（この列サイズの基線長は「SOMETHING」です）。私は数字を微調整してjsFiddleの出力に見えるようにしましたが、サイト上では必要に応じて値を調整し、それに応じて値を調整して予期せぬ出力（ビューが小さくなると列を積み重ねる）を得ないようにしてください。

もっと柔軟にする必要がある場合は、各単語の長さ/色のサイズに応じて測定値を計算する関数を作成できます。あなたのフォントファミリと選択した単語は、私が選んだものではないので、あなたのマイレージは異なる場合があります。

他の誰かが外部の既存のライブラリを使用せずに優れたソリューションを持っている場合は、共有してください！私は知りたいです。私のブラウザから

出力：

See jsFiddle

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); 
 

 
.col-xs-4, 
 
.col-xs-8 { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.content-text { 
 
    width: 100%; 
 
} 
 
#content-text-THE { 
 
    float: right; 
 
    font-size: 10.0vh; 
 
    line-height: 0.75em; 
 
} 
 
#content-text-top { 
 
    float: left; 
 
    font-size: 5vh; 
 
    line-height: 0.7em; 
 
    letter-spacing: 1.04em; 
 
} 
 
#content-text-mid { 
 
    float: left; 
 
    clear: left; 
 
    font-size: 5vh; 
 
    line-height: 0.8em; 
 
    letter-spacing: 0.08em; 
 
} 
 
#content-text-bot { 
 
    font-size: 5vh; 
 
    line-height: 0.8em; 
 
    letter-spacing: 0em; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-xs-4"> 
 
      <span id="content-text-THE">THE</span> 
 
     </div> 
 
     <div class="col-xs-8"> 
 
      <div class="content-text"> 
 
       <span id="content-text-top">COOL</span> 
 
      </div> 
 
      <div class="content-text"> 
 
       <span id="content-text-mid">ESPRESSO</span> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-xs-4"> 
 
     </div> 
 
     <div class="col-xs-8"> 
 
      <div class="content-text"> 
 
       <span id="content-text-bot">SOMETHING</span> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>