33

Twitter Bootstrap は初めてです。私は次のHTMLを書きました：

<div class="span4">
   <span class="row-fluid hideOverflow">
   @Html.ActionLink(item.Name, "Details", new { id = item.Id }, new { @class = "JumpLinks", @style = "font-size:13px;font-weight:bold;" })
   </span>
</div>

クラスの は次のとおりですCSS。hideOverflow

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

しかし、それは私に次のように結果を示しています: ここに画像の説明を入力

次に、「row-fluid」をに変更するspan12と、次の結果が表示されます。

ここに画像の説明を入力

私のhideOverFlowクラスがクラスで動作しないのはなぜrow-fluidですか?

row-fluidクラスと同じ結果を得るには、何を変更する必要がありますか?

4

4 に答える 4

15

このようなhtml構造を作る...

<div class="span4">
   <span class="hideOverflow">@Html.ActionLink(item.Name, "Details", new { id = item.Id }, new { @class = "JumpLinks", @style = "font-size:13px;font-weight:bold;" })</span>
</div>

CSS:-

.hideOverflow
{
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    width:100%;
    display:block;
}
于 2013-03-09T07:14:39.023 に答える
2

正しい場所で行流体を使用していないため、問題が発生しています。Row-fluid は行を作成し、その中に span クラスを使用して列を作成できます。row-fluid はパーセンテージを使用するため、大きな画面では使用可能なすべての水平スペースを埋めるように拡張し、列を縮小して画面のように垂直方向にスタックしないようにします。サイズが変更されます。

したがって、基本的な原則は、次のように行流体を使用することです。

<div class="row-fluid">
   <div class="span4">
     <span class="hideOverflow">@Html.ActionLink(item.Name, "Details", new { id = item.Id }, new { @class = "JumpLinks", @style = "font-size:13px;font-weight:bold;" })</span>
      </span>
   </div>
</div>

これが、row-fluid を削除して span12 に置き換えたときに問題が解決した理由です。また、次のように、幅 :100% のプロパティを持つクラスでスパンを割り当てることもベスト プラクティスです。

.text-span{
         {
    width: 100%;
  }

次に、次のようにコードで使用します。

  <div class="row-fluid">
      <div class="span4">
         <span class=" text-span hideOverflow">@Html.ActionLink(item.Name, "Details", new { id = item.Id }, new { @class = "JumpLinks", @style = "font-size:13px;font-weight:bold;" })</span>
      </span>
   </div>
</div>

span4 内で span12 を使用しないでください。

于 2013-03-09T07:56:11.280 に答える
1

DIV に word-wrap: break-word を追加します。これを書きます：

.span4{
    width: 700px;
    word-wrap: break-word;
}
于 2013-03-09T07:15:53.597 に答える