26

Bootstrapには優れた水平方向の定義リストのスタイルがありますが、DTコンテンツを切り捨てるのではなく、折り返す必要があります。

私は彼らのbase.cssページで、 「Heads up！水平方向の説明リストは、長すぎて左側の列に収まらない用語を切り捨てて、テキストのオーバーフローを修正する」と言っていることを知っています。

誰かがこれの修正を知っていますか？

これが、私が苦労して成功しなかった既成のブートストラップCSSです。

.dl-horizontal {
  *zoom: 1;
}
.dl-horizontal:before,
.dl-horizontal:after {
  display: table;
  content: "";
  line-height: 0;
}
.dl-horizontal:after {
  clear: both;
}
.dl-horizontal dt {
  float: left;
  width: 160px;
  clear: left;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

ここでの私の質問は、それが役立つ場合は、この質問に似ています 。Twitterのブートストラップが空の<dd>で次の<dd>値がいっぱいになるのを防ぐ

前もって感謝します！

4

4 に答える 4

39

ブートストラップ CSS 参照の後に CSS 上書きを追加します

.dl-horizontal dt 
{
    white-space: normal;
    width: 200px; 
}
于 2012-10-12T13:57:29.793 に答える
20

ウィンドウ幅が狭くなった場合に改行を緩めたくなかったので、これを使用しました。

@media (min-width: 768px) {
    .dl-horizontal dt {
        width:280px;
        white-space: normal;
        margin-bottom: 5px;
    }
    .dl-horizontal dd {
        margin-left:300px;
    }
}

widthおよび は、行ごとの列margin-leftにより多くのテキストを表示したい場合のオプション設定です。dt20px の違いは、列間のスペースです。

により、行間に少しスペースが追加されるmargin-bottomため、互いに区別しやすくなります。white-space: normal;これは、改行を生成する場合にのみ役立ちます (フォント サイズはビジター (Windows の dpi 設定など) によって影響を受ける可能性があることを忘れないでください)。

ここに画像の説明を入力

小窓の幅:
ここに画像の説明を入力

比較するブーストラップ ソース:

dd {
  margin-left: 0;
}
@media (min-width: 768px)
.dl-horizontal dt {
  float: left;
  width: 160px;
  overflow: hidden;
  clear: left;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (min-width: 768px)
.dl-horizontal dd {
  margin-left: 180px;
}
于 2015-04-01T10:50:15.010 に答える
18

すべてのdtでコンテンツをラップする場合は、ブロックwhite-space: nowrap;からコメントアウトできます.dl-horizontal dt

単一のdtのコンテンツをラップする場合は、style='white-space: normal;'その特定のdtにインラインを追加します

于 2012-10-07T10:19:03.887 に答える
5

あなたの id を与えますdl:<dl class="dl-horizontal" id="freelance">

次に、これを css に追加します。

#freelance dt {
    overflow: visible;
    width: 170px !important;
    margin-right: 8px;
}

必要に応じて幅と余白を変更します。

于 2013-03-15T05:41:58.597 に答える