簡體   English   中英

Bootstrap 樣式有效但外觀不再相同

[英]Bootstrap styling working but not the same looking anymore

[![來自引導程序][1]][1] [1]:https://i.stack.imgur.com/h3iea.png

<button type="button" class="btn btn-info">Info</button>這來自 getBootstrap.com

在此處輸入圖像描述

<a id="manage" class="btn btn-info" style="margin:2px;" asp-area="Identity" asp-page="/Account/Manage/Index" title="Manage">@UserManager.GetUserName(User)!</a> <a id="manage" class="btn btn-info" style="margin:2px;" asp-area="Identity" asp-page="/Account/Manage/Index" title="Manage">@UserManager.GetUserName(User)!</a>這是來自我的 web 應用程序。

嗨,我不確定這里發生了什么,我使用的是 Bootstrap 樣式並使用了相同的btn-info但 output 與上圖所示不同。

奇怪的是,這很好用,一周前我最后一次使用它時顏色相同,然后今天回到我的項目繼續工作,突然不同了。

也許我在不知不覺中做了什么,我想,所以我回去修改了一個版本,然后又修改了兩個版本,但按鈕的顏色仍然是一樣的,稍微亮一點。

在 Chrome 和 Edge 上啟動應用程序,沒有區別。

有沒有人有過這樣的經歷?

====================
(2021 年 7 月 9 日更新 1)

    <link rel="stylesheet" type="text/css" href="~/css/site.css" />
    <link rel="stylesheet" type="text/css" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="~/lib/datatables/DataTables-1.10.25/css/dataTables.bootstrap5.min.css" />

    <script src="~/js/site.js" asp-append-version="true"></script>
    <script type="text/javascript" src="~/lib/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script type="text/javascript" src="~/lib/datatables/DataTables-1.10.25/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="~/lib/datatables/DataTables-1.10.25/js/dataTables.bootstrap5.min.js"></script>

我使用的是下載版本的 Bootstrap,上面是腳本代碼。

<button class="btn btn-outline-primary btn-sm" style="margin:3px;" data-toggle="collapse" data-target="#row_op" onclick="c => this.Collapsed = !this.Collapsed">
            Detail Expand/Collapse
        </button>

        <div id="row_op" class="collapse">
            <div class="row">

昨天我正在做一些故障排除,我認為奇怪的顏色只是表示某些東西不能正常工作。 我也在使用data-targetcollapse但它們目前不工作。

我真正難以理解的是,我完全刪除了項目文件的當前版本並下載了我一個月前所做的提交(即 5 次修訂前)然后運行它,奇怪的顏色仍然存在並且collapse不起作用任何一個。 這對我來說似乎是瀏覽器的問題,但我做的第一件事就是在 Chrome 和 Edge 上嘗試這個。

====================
(2021 年 7 月 9 日更新 2)

我記得我已經在筆記本電腦上發布了用於服務器測試的副本。 所以在筆記本電腦上啟動它,一切正常,按鈕的顏色、間距、折疊功能都正常。
然后我將整個文件夾復制到我的桌面並再次啟動它,Bootstrap 仍然無法正常工作。 檢查兩台計算機上的 Chrome 91.0.4472.124 版本是否相同。
至少這證實了代碼是好的,但問題更加麻煩,因為現在我發現我的應用程序在不同的計算機上可能出於完全未知的原因而表現不同。 但是,如果不是代碼或瀏覽器,還有什么會影響代碼在瀏覽器上的行為?

Visual Studio 2019 community ,我將測試啟動選項從IIS express切換到my app ,一切又恢復正常。 所以我用於測試的組合會影響結果。
我的結論是需要控制用戶環境,但我認為在開發過程中沒有什么可以做的不同的事情。

按鈕的第二個圖像(藍色背景和黑色文本)是官方引導信息按鈕設計。 這里的問題可能是第三方擴展扭曲了您對 bootstrap 主頁的看法。 請務必在 - 無擴展隱身模式下對其進行測試。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM