Bootstrap CSS堆叠文本

Question

我试图在Bootstrap列中堆叠文本，但无法弄清楚我将如何去做。

这是我想要实现的原型的粗略模型：

第一个字＆＃34; THE＆＃34;应该占用2行，而3＆＃34; SOMETHINGS＆＃34;每行1行。还有一种方法来拉伸＆＃34; SOMETHINGS＆＃34;如果它们是不同的词，那么它们的长度相等吗？

    <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

如果必须使用Bootstrap列，则下面是一个开始。 如果您调整列大小调整或使用的字体或文字，请调整字体大小，行高和字母间距值。

字体大小主要帮助垂直填充视图，线条高度辅助垂直对齐，字母间距有助于文本的水平间距（＆＃39; SOMETHING＆＃39;是此col大小的基线长度） 。我调整了数字，因此它在jsFiddle输出中看起来不错，但在您的网站上，您应该根据需要调整值并相应地包装它，这样您就不会得到任何意外的输出（当视图变小时堆叠列）。 p>

如果您需要它更灵活，您可以创建一个函数来根据每个字长/ col大小计算测量值。您选择的字体系列和单词不是我选择的，所以您的里程可能会有所不同。

如果其他人在没有使用外部现有库的情况下拥有更好的解决方案，请分享！我想知道。

我的浏览器输出：

See jsFiddle

＆＃13;

＆＃13;

@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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;