0

我正在努力在网页上显示搜索结果。这个网页正在使用 twitter bootstrap，但我找不到任何我想要的 bootstrap ready-to-go 风格。但是，我在使用 twitter bootstrap 时不是很有经验，所以可能有些事情我不知道。

由于我没有找到任何适合我需要的 twitter 引导程序，我尝试了以下方法：

<div id="searchResults" class="inner-content">
    <ul class="multiColumn">
        <li class="userPresentation userid2">
            <a class="removeFromShortList close" href="#" title="shortlist.searchResult.removeFromShortListLabel">
                <i class="icon-minus-sign"></i>
            </a>
            <div class="userContent">
                <img class="img-rounded pull-left" src="/assets/img/default_avatar_50x50.png" alt="profileImage">
                <a href=" /viewProfile/2" class="userName" title=" Single line">
                    Single line
                </a>
            </div>
        </li>
    </ul>
</div>

使用如下所示的 CSS：

.inner-content { /* border */
    margin-bottom: 14px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
    overflow: hidden
}
ul.multiColumn,ul.multiColumn li {
    margin: 2px;
    padding: 0px;
}
ul.multiColumn li.userPresentation {
    display: inline-block;
    min-height: 54px;
    max-height: 54px;
    width: 150px;
    max-width: 150px;
    background-color: #eee;
    line-height: 13px;
}
ul.multiColumn li.userPresentation .userContent {
    margin: 2px;
    font-size: 12px;
}

这似乎工作正常，除了这个：

  1. 如果其中一个用户名包含在两行或多行上，则那些没有被下推的用户名如下图所示。
  2. 我希望隐藏溢出的文本并...显示 a 。在这里我可能需要使用 jquery 插件？
  3. 我无法将用户名垂直居中。

这是一些测试数据的结果：在此处输入图像描述

如果那里有任何 CSS 或 Bootstrap Guru，我将非常感谢您的帮助。如果有任何不错的 Bootstrap 方法来显示考虑媒体宽度的此类数据，那将是超级的；）

4

1 回答 1

2

  1. 只需添加vertical-align: bottom;：

    ul.multiColumn li.userPresentation {
    display: inline-block;
    min-height: 54px;
    max-height: 54px;
    width: 150px;
    max-width: 150px;
    background-color: #eee;
    line-height: 13px;
    vertical-align: bottom;
}

  2. 对于溢出省略号，请使用：

    ul.multiColumn li.userPresentation .userContent a {
    display: inline-block;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: center;
}

  3. 应用上述内容后，它变为垂直居中。

于 2013-02-16T12:55:53.227 回答