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

前提・実現したいこと

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;
}
}

行動規範の内容に同意します

回答1件

ベストアンサー

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

CSS
1@media (min-width: 768px) {
2  .dl-horizontal dt {
3    width: 300px;
4    /* ...をなくしたければ white-space: normal; としてもいいかも */
5  }
6
7  .dl-horizontal dd {
8    margin-left: 320px;
9  }
10}

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

投稿2018/11/29 07:17

x_x

総合スコア13749

退会済みユーザー

2018/11/29 07:46

ご回答ありがとうございます。編集したのですが変わりませんでした。dtとddにクラスを設定して width:280px margin-left:300pxでそれぞれ設定すると出来たのですが小さい画面にすると bootstrapが当然効かないのでddのmargin-left:300pxが効いたままになっています。 margin-left:0pxにして挙動を合わせたいのですがbootstrap3では無理ですかね。。

x_x

2018/11/29 07:49

ddも@media (min-width: 768px) {}内に書いて回答したのですが、どのようなコードを書いたのでしょうか？

退会済みユーザー

2018/11/29 07:58

@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; } } です

x_x

2018/11/29 08:03

そうなると小さい画面では適用外ですよね？ margin-left:300px はどこで適用されたのでしょうか？

x_x

2018/11/29 08:07

それと、「dtとddにクラスを設定して」とあるのに書かれていないのが謎です。一度再現するコードを書いてもらったほうがいいかもしれません。

退会済みユーザー

2018/11/29 08:08

<dl class="dl-horizontal wide"> wideを付けて以下のCSSを書きました .wide dt { width: 280px; } .wide dd { margin-left: 300px; }

x_x

2018/11/29 08:11

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