Non riesco a far funzionare responsabilmente il design bootstrap con dotnetnuke

Ho usato twitter bootstrap nel mio progetto con DotNetNuke. Ho fatto la mia progettazione e il mio layout usando HTML, CSS, bootstrap. Il design reattivo funzionava perfettamente quando l'ho provato su diversi dispositivi mobili e anche quando ridimensionavo la finestra del mio browser.Non riesco a far funzionare responsabilmente il design bootstrap con dotnetnuke

Come funzionava bene, ho convertito il design in DotNetNuke Skin. Ora, il design reattivo funziona bene solo quando ridimensiono la finestra del browser e non sui dispositivi mobili. Capisco il flusso in cui DNN carica i fogli di stile e l'ho seguito. Ho creato my skin.css come combinazione di bootstrap.css e seguito dal contenuto di bootstrap-responsive.css

Non riesco a trovare il problema come se usassi lo stesso skin.css con il mio html, funziona bene ma non funziona con DNN (sui dispositivi mobili).

fonte

2012-05-22 Siddharth Pandey

Ti manca il meta che si rivolge ai dispositivi mobili per una scala adeguata. Inserire il seguente nell'intestazione della pagina:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

fonte

2012-05-22 11:12:42

Hey Andres, hai ragione, ho dimenticato di includerlo in default.aspx. –

Ricevo una barra di scorrimento orizzontale! Come posso rimuoverlo? –

@SidP non ha un dispositivo mobile a disposizione per testare, ma uno dei tuoi elementi probabilmente sta traboccando il tuo contenitore principale. Una soluzione rapida sarebbe aggiungere 'body {overflow-x: hidden; } 'nel tuo foglio di stile per nascondere quella barra di scorrimento orizzontale ma una soluzione più appropriata sarebbe quella di dare la caccia a quell'elemento che sta straripando. –

Ho appena notato qualcosa di interessante e desidera condividere, forse sarà aiutare qualcuno. Nella sezione header del sito dovresti includere prima il bootstrap.css e solo dopo il bootstrap-responsive.css perché ovviamente responsive.css dipende dal bootstrap.css

Ovviamente il meta tag dovrebbe essere presente anche.

<link href="/css/bootstrap.css" rel="stylesheet" type="text/css" /> 
<link href="/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">

fonte

2012-09-30 19:06:34

Assicurarsi reattivo CSS (responsive.css) è incluso dopo base non prima.

fonte

2012-11-22 12:55:38

meltov: Per favore, puoi dirmi cosa significa "dopo base non prima" – Nadeem

@Nadeem il primo collegamento al foglio di stile 'bootstrap.css' e quindi responsive' bootstrap-responsive.css'. –

Grazie mille, ho solo confuso su "dopo e prima" – Nadeem

Non riesco a far funzionare responsabilmente il design bootstrap con dotnetnuke

risposta

Problemi correlati