0

Web ページに検索結果を表示する作業を行っています。この Web ページは Twitter ブートストラップを使用していますが、必要なブートストラップのすぐに使用できるスタイルが見つかりませんでした。ただし、私は twitter ブートストラップの使用経験があまりないため、認識していないことがあるかもしれません。

私のニーズに合った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. ユーザー名の 1 つが 2 行以上にまたがっている場合、下の図に示すように、そうでないものは押し下げられます。
  2. はみ出した文字を非...表示にして表示したいです。ここでおそらく 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 に答える