質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.63%

bootstrapのdl-horizontalのdtのサイズを変更したい

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,778
退会済みユーザー

退会済みユーザー

 前提・実現したいこと

VS2017のASP.NETでシステムを作成しています。
dl-horizontalで表示している部分があるのですが
項目名が長く既定のままのサイズでは...表示になってしまいます。
もうすこし長くdtの幅をとりつつ、dl-horizontalの機能を有したまま
変更したいのです。
詳しい方おられましたらご教示のほどよろしくお願いします。

.wideなしにしました。

@model kyoucyou_001.Models.P_N_T_N_A_Pull_20150801

@{
ViewData["Title"] = "Details";
}

<h2>詳細</h2>

<div>
<h4>引込工事 20150801</h4>
<hr />
<!--マンションの情報-->
<div id="result_0"></div>
<dl class="dl-horizontal">
<!--引込工事№-->
<dt>
@Html.DisplayNameFor(model => model.Id)
</dt>
<dd>
@Html.DisplayFor(model => model.Id)
</dd>

<!--ID-->
<dt>
@Html.DisplayNameFor(model => model.P_N_Apartment_List_Id)
</dt>
<dd>
@Html.DisplayFor(model => model.P_N_Apartment_List_Id)
</dd>

<!--完了日-->
<dt>
@Html.DisplayNameFor(model => model.kanryou_bi)
</dt>
<dd>
@Html.DisplayFor(model => model.kanryou_bi)
</dd>

<!--請求日-->
<dt>
@Html.DisplayNameFor(model => model.seikyu_bi)
</dt>
<dd>
@Html.DisplayFor(model => model.seikyu_bi)
</dd>

<!--支払日-->
<dt>
@Html.DisplayNameFor(model => model.shiharai_bi)
</dt>
<dd>
@Html.DisplayFor(model => model.shiharai_bi)
</dd>

<!--施工業者-->
<dt>
@Html.DisplayNameFor(model => model.P_N_T_N_A_Pull_20150801_Builder.builder_name)
</dt>
<dd>
@Html.DisplayFor(model => model.P_N_T_N_A_Pull_20150801_Builder.builder_name)
</dd>

<!--引・集合引込4芯融着1-->
<dt>
@Html.DisplayNameFor(model => model.s_4_yucyaku_1)
</dt>
<dd>
@Html.DisplayFor(model => model.s_4_yucyaku_1)
</dd>

<!--引・集合引込4芯融着2-->
<dt>
@Html.DisplayNameFor(model => model.s_4_yucyaku_2)
</dt>
<dd>
@Html.DisplayFor(model => model.s_4_yucyaku_2)
</dd>

<!--引・集合引込8芯融着1-->
<dt>
@Html.DisplayNameFor(model => model.s_8_yucyaku_1)
</dt>
<dd>
@Html.DisplayFor(model => model.s_8_yucyaku_1)
</dd>

<!--引・集合引込8芯融着2-->
<dt>
@Html.DisplayNameFor(model => model.s_8_yucyaku_2)
</dt>
<dd>
@Html.DisplayFor(model => model.s_8_yucyaku_2)
</dd>

<!--引・カプラー取付(引込クロージャー内)-->
<dt>
@Html.DisplayNameFor(model => model.kapura_toritsukke)
</dt>
<dd>
@Html.DisplayFor(model => model.kapura_toritsukke)
</dd>

<!--引・延線4芯-->
<dt>
@Html.DisplayNameFor(model => model.e_4)
</dt>
<dd>
@Html.DisplayFor(model => model.e_4)
</dd>

<!--引・延線8芯-->
<dt>
@Html.DisplayNameFor(model => model.e_8)
</dt>
<dd>
@Html.DisplayFor(model => model.e_8)
</dd>

<!--引・スパイラル新設-->
<dt>
@Html.DisplayNameFor(model => model.sp_shinsetsu)
</dt>
<dd>
@Html.DisplayFor(model => model.sp_shinsetsu)
</dd>

<!--引・スパイラル交換-->
<dt>
@Html.DisplayNameFor(model => model.sp_koukan)
</dt>
<dd>
@Html.DisplayFor(model => model.sp_koukan)
</dd>

<!--引・メッセン新設-->
<dt>
@Html.DisplayNameFor(model => model.m_shinsetsu)
</dt>
<dd>
@Html.DisplayFor(model => model.m_shinsetsu)
</dd>
</dl>
</div>
<div>
<a asp-action="Edit"
asp-route-id="@Model.Id"
asp-route-page="@ViewBag.Page"
asp-route-search_0="@ViewBag.Search_0"
asp-route-search_item_0="@ViewBag.Search_Item_0"
asp-route-search_1="@ViewBag.Search_1"
asp-route-search_item_1="@ViewBag.Search_Item_1"
asp-route-oya_id="@ViewBag.Oya_id" class="btn btn-default" role="button">編集</a> |

<a asp-action="Delete"
asp-route-id="@Model.Id"
asp-route-page="@ViewBag.Page"
asp-route-search_0="@ViewBag.Search_0"
asp-route-search_item_0="@ViewBag.Search_Item_0"
asp-route-search_1="@ViewBag.Search_1"
asp-route-search_item_1="@ViewBag.Search_Item_1"
asp-route-oya_id="@ViewBag.Oya_id" class="btn btn-default" role="button">削除</a> |

<a asp-action="Details"
asp-controller="P_N_Apartment_Lists"
asp-route-id="@ViewBag.Oya_id"
asp-route-page="@ViewBag.Page"
asp-route-search_0="@ViewBag.Search_0"
asp-route-search_item_0="@ViewBag.Search_Item_0"
asp-route-search_1="@ViewBag.Search_1"
asp-route-search_item_1="@ViewBag.Search_Item_1" class="btn btn-default" role="button">Back to List</a>
</div>
@section Scripts {
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}

<script>

$(document).ready(function () {
//読み込み時
$('#result_0').load('/Ajax/P_N_Apartment_List_Search_00/?id=' + @ViewBag.Oya_Id );
});

</script>
}

これはsite.cssに明記しました

@media (min-width: 768px) {
.dl-horizontal dt {
float: left;
width: 280px;
overflow: hidden;
clear: left;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
}
.dl-horizontal dd {
margin-left: 300px;
}
}

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

幅を長くするものは特に用意されていないようなので、CSSを書いて上書きしましょう。

@media (min-width: 768px) {
  .dl-horizontal dt {
    width: 300px;
    /* ...をなくしたければ white-space: normal; としてもいいかも */
  }

  .dl-horizontal dd {
    margin-left: 320px;
  }
}


ちなみに Bootstrap 4では .dl-horizontal は削除され、グリッドシステムを使うようになっています。
https://getbootstrap.com/docs/4.1/migration/#typography

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/11/29 17:11

    やはり違いますよね?
    @media (min-width: 768px) {}はどうなりました?
    ここではなく、質問文へHTMLを添えて追記してみてください。

    キャンセル

  • 2018/11/29 17:23

    了解しました

    キャンセル

  • 2018/11/29 19:04

    成功しました。御助言ありがとうございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.63%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る