这可能是一个简单的问题,但我对如何解决我的问题感到困惑。
我有一系列显示用户联系方式的div。
当提供所有用户的联系人详细信息时,联系人详细信息的显示将正确对齐,如下所示:
但是,当仅提供部分联系人详细信息时,联系人详细信息不会正确对齐。这里是一个预览,用户没有提供他们的电子邮件地址:
当使用CSS只提供部分用户详细信息时,如何对齐详细信息?我使用twitter bootstrap 2.3进行响应设计,因此我假设span4(允许每行3个联系人详细信息)将正确对齐,但它没有。
我一直在寻找解决办法,但一无所获。我试过一些补救措施,但我想不出有什么效果。
这是我的HTML:

<div class="resumeStyleStandardNacContactContainer25" dir="ltr" style="direction: ltr;">
    {{ #if contact_details_phone }}
        <span class="span4 ellipsis" dir="ltr" style="direction: ltr;">
            <i class="icon-phone icon_size20"></i>&nbsp;&nbsp;{{ contact_details_phone }}
        </span>
    {{ /if }}
    {{ #if contact_details_mobile_phone }}
        <span class="span4 ellipsis" dir="ltr" style="direction: ltr;">
            <i class="icon-phone icon_size20"></i>&nbsp;&nbsp;{{ contact_details_mobile_phone }}
        </span>
    {{ /if }}
    {{ #if contact_details_email_address }}
        <span class="span4 ellipsis" dir="ltr" style="direction: ltr;">
            <i class="icon-email icon_size20"></i>&nbsp;&nbsp;{{ contact_details_email_address }}
        </span>
    {{ /if }}
    {{ #if contact_details_linkedin_address }}
        <span class="span4 ellipsis" dir="ltr" style="direction: ltr;">
            <i class="icon-linkedin icon_size20"></i>&nbsp;&nbsp;<span class="btu-link">{{ contact_details_linkedin_address }}</span>
        </span>
    {{ /if }}
    {{ #if contact_details_facebook_address }}
        <span class="span4 ellipsis" dir="ltr" style="direction: ltr;">
            <i class="icon-facebook icon_size20"></i>&nbsp;&nbsp;<span class="btu-link">{{ contact_details_facebook_address }}</span>
        </span>
    {{ /if }}
    {{ #if contact_details_twitter_address }}
        <span class="span4 ellipsis" dir="ltr" style="direction: ltr;">
            <i class="icon-twitter icon_size20"></i>&nbsp;&nbsp;<span class="btu-link">{{ contact_details_twitter_address }}</span>
        </span>
    {{ /if }}
</div>

这是我的CSS:
.resumeStyleStandardNacContactContainer25 {
    padding-bottom: 1px;
}

.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

最佳答案

if语句移到您所看到的消失的块中。
但是,您需要计算所需的引导列的数量,而不是span4
这看起来是可行的,但它会留下漏洞,没有JSFiddle我们不能完全确定。
例如;

<span class="span4 ellipsis" dir="ltr" style="direction: ltr;">
    {{ #if contact_details_phone }}
    <i class="icon-phone icon_size20"></i>&nbsp;&nbsp;
    {{ contact_details_phone }}
    {{ /if }}
</span>

另一种方法是,foreach循环每个可能的联系细节可能性(以及像图标和URL之类的选项),检查该值是否存在,但是你可能需要再次计算span4应该是什么。

10-05 21:04
查看更多