Bootstrap 5.2.2 - Classe ".alert" non viene visualizzata

**tsutomu** · 30-10-2022, 13.04.46

Buongiorno a tutti,
ho fatto una ricerca nel forum, ma non trovo nulla a riguardo. Se la tematica fosse già stata presentata, chiedo scusa, eventualmente reindirizzatemi al thread corretto.

Espongo il mio problema e i test che ho fatto. Cerco di spiegare il meglio possibile, ma perdonate errori di lessico/nomenclatura in quanto le mie conoscenze sono amatoriali.

In una pagina di test (test.html) ho "referenziato" il framework Bootstrap 5.2.2, richiamando direttamente l'URL con i link CDN forniti sulla documentazione di Bootstrap stesso. Ho caricato sia il CSS che il JS. Questa pagina l'ho caricata sulla root del mio spazio Altervista.
Funziona tutto correttamente eccetto la classe ".alert".

Quando creo un "div" con la suddetta classe, come da documentazione Bootstrap, esso non viene visualizzato. Ispezionando la pagina, l'oggetto "<div>" viene creato, ma di fatto rimane invisibile, pur avendo tutte le proprietà che dovrebbe avere.
Infatti la stessa pagina, salvata sul PC in locale e lanciata su un browser, funziona correttamente: espone il "<div>" formattato come un ".alert", così come da documentazione Bootstrap.

Prendendo dal .css di Bootstrap la parte che definisce la classe ".alert" (copia-incolla) e ponendola direttamente nella pagina di test all'interno di un tag "<style>", l'anomalia si presenta ugualmente: in locale l'oggetto viene visualizzo correttamente, su Altervista no.

In questa nuova versione della pagina test.html, versione in cui all'interno di un tag "<style>" ho riportato lo stile della classe ".alert", ho provato quindi a definire la classe come ".alerts" e a dare la stesse classe al "<div>".
In questo modo, su Altervista, il "<div>" viene visualizzato correttamente.

Qualcuno ha modo di verificare e confermare che la classe ".alert" del framework Bootstrap 5.2.2 non viene visualizzata qui su Altervista? O se sto sbagliando qualcosa io?
Vi sono dei "conflitti" a causa del nome della classe ("alert" somiglia molto ad una "parola chiave")?

A seguire: il codice della pagina originale (locale: OK, Altervista: KO), il codice con lo stile imposto direttamente sulla pagina (locale: OK, Altervista: KO), il codice con la classe ".alert" modificata in ".alerts" (locale: OK, Altervista: OK)

Grazie per un eventuale aiuto,
buona giornata,
Simone

--

Qui sotto la pagina originale:

Codice:

<!doctype html>
<html class="no-js" lang="it">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Test</title>
        <!-- Bootstrap CSS -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
        <div class="alert alert-primary">
            A simple primary alert—check it out!
        </div>
        <!-- Bootstrap JavaScript -->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
    </body>
</html>

Qui sotto la pagina con lo stile imposto:

Codice:

<!doctype html>
<html class="no-js" lang="it">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Test</title>
        <!-- Bootstrap CSS -->
        <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"> -->
    </head>
    <body>
        <style>
            .alert{
                --bs-alert-bg:transparent;
                --bs-alert-padding-x:1rem;
                --bs-alert-padding-y:1rem;
                --bs-alert-margin-bottom:1rem;
                --bs-alert-color:inherit;
                --bs-alert-border-color:transparent;
                --bs-alert-border:1px solid var(--bs-alert-border-color);
                --bs-alert-border-radius:0.375rem;
                position:relative;
                padding:var(--bs-alert-padding-y) var(--bs-alert-padding-x);
                margin-bottom:var(--bs-alert-margin-bottom);
                color:var(--bs-alert-color);
                background-color:var(--bs-alert-bg);
                border:var(--bs-alert-border);
                border-radius:var(--bs-alert-border-radius)
            }
            .alert-primary{
                --bs-alert-color:#084298;
                --bs-alert-bg:#cfe2ff;
                --bs-alert-border-color:#b6d4fe
            }
        </style>
        <div class="alert alert-primary">
            A simple primary alert—check it out!
        </div>
        <!-- Bootstrap JavaScript -->
        <!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script> -->
    </body>
</html>

Qui sotto la pagina con la classe rinominata:

Codice:

<!doctype html>
<html class="no-js" lang="it">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Test</title>
        <!-- Bootstrap CSS -->
        <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"> -->
    </head>
    <body>
        <style>
            .alerts{
                --bs-alert-bg:transparent;
                --bs-alert-padding-x:1rem;
                --bs-alert-padding-y:1rem;
                --bs-alert-margin-bottom:1rem;
                --bs-alert-color:inherit;
                --bs-alert-border-color:transparent;
                --bs-alert-border:1px solid var(--bs-alert-border-color);
                --bs-alert-border-radius:0.375rem;
                position:relative;
                padding:var(--bs-alert-padding-y) var(--bs-alert-padding-x);
                margin-bottom:var(--bs-alert-margin-bottom);
                color:var(--bs-alert-color);
                background-color:var(--bs-alert-bg);
                border:var(--bs-alert-border);
                border-radius:var(--bs-alert-border-radius)
            }
            .alert-primary{
                --bs-alert-color:#084298;
                --bs-alert-bg:#cfe2ff;
                --bs-alert-border-color:#b6d4fe
            }
        </style>
        <div class="alerts alert-primary">
            A simple primary alert—check it out!
        </div>
        <!-- Bootstrap JavaScript -->
        <!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script> -->
    </body>
</html>

**tsutomu** · 01-11-2022, 22.28.28

Forse avrei dovuto controllare prima (mea culpa).
Il problema si presenta su browser Chrome.
Opera, Firefox ed Edge non hanno problemi.

La combinata Altervista + Chrome sembra avere problemi. Mi permetto di dire che centra Altervista perché, ripeto, la pagina caricata da PC locale, viene visualizzata correttamente anche su Chrome.

**alemoppo** · 02-11-2022, 09.39.59

Visto che si tratta interamente di codice lato client, non vedo come possa centrare Altervista.

Hai provato a pulire la cache di Chrome? A me il primo codice funziona correttamente.

Ciao!

**tsutomu** · 03-11-2022, 00.10.28

Grazie della risposta.
La parola chiave "lato client" mi ha permesso di guardare il problema da un altro punto di vista.

Non si trattava della cache di Chrome, bensì di un componente aggiuntivo che bloccava l'oggetto.
Nello specifico: Ghostery.
Disabilitandolo si vede correttamente l'oggetto.

Chiedo scusa per non averci pensato prima. Grazie ancora della risposta.

**wishop** · 22-09-2023, 13.46.26

SoapClient: Il tuo server non ha la classe SoapClient attiva - alcuni plugin gateway che usano SOAP potrebbero non funzionare correttamente. NON FUNZIONA.

**alemoppo** · 22-09-2023, 18.34.32

https://forum.it.altervista.org/php-...ml#post1488947

Ciao!

Discussione: Bootstrap 5.2.2 - Classe ".alert" non viene visualizzata

LinkBack

Strumenti discussione

Display

Bootstrap 5.2.2 - Classe ".alert" non viene visualizzata

Tags for this Thread

Regole di scrittura