html - 标签和文本在 Bootstrap 中的文本溢出时未正确对齐

Question

我有一个内联标签和只读文本。当只读文本溢出时，它会进入标签下方。我希望文本不在标签下。

这是我得到的:

如我所愿:

 <div class="row">
        <div class="col-md-4">
                <h4 class="text-muted">Employer Information</h4>
                <div class="form-inline word-wrap">
                    <label class="control-label label-normalWeight">Name</label>
                    <strong><bean:write name="myform" property="name" /></strong>
                </div>
            .........
         </div>
       </div>

word-wrap类如下:

.word-wrap {
    word-wrap: break-word;
}

Answer 1

如果您希望文本换行但不关心 <strong>内容缩进到另一列，你应该改变你的 .word-wrap类包含 word-break: break-all; (这就是您所需要的):

.word-wrap {
    word-break: break-all;
} 

然后用 .form-group 将您的元素括起来类(您需要使用 .control-label 作为您的标签):

 <div class="row">
    <div class="col-md-4">
        <h4 class="text-muted">Employer Information</h4>
            <div class="form-inline word-wrap">
                <div class="form-group">
                    <label class="control-label label-normalWeight">Name</label>
                    <strong class="word-wrap"><bean:write name="myform" property="name" /></strong>
                </div>
            </div>
        .........
     </div>
 </div>

http://www.bootply.com/ST1AlByo4g

但是，如果您想要 <strong> 的全部内容缩进，你最好创建另一组列 - 然后应用 .word-wrap类到 <strong>元素或包装器:

<div class="row">
    <div class="col-md-4">
        <h4 class="text-muted">Employer Information</h4>
    </div>
</div>
<div class="row">
    <div class="col-md-1 col-xs-1">
        <label class="control-label label-normalWeight">Name</label>
    </div>
    <div class="col-md-3 col-xs-3">
        <strong class="word-wrap"><bean:write name="myform" property="name" /></strong>
    </div>
</div>

http://www.bootply.com/JLnvtz9o4i