Div Floating nel layout Bootstrap

Ho bisogno di fare qualcosa di simile usando Boostrap. Contenuto "fluido" nella pagina con due widget al suo interno: prima in alto a destra e il secondo in basso a sinistra.Div Floating nel layout Bootstrap

enter image description here

Widget1 è facile - ho solo bisogno class = "pull-destra". Ma cosa fare con il secondo per arrivare in fondo alla pagina mantenendo il "Contenuto" in giro?

style="bottom:0;" non funziona: Avere questo codice

<div class="container-fluid"> 
    <div class="row-fluid"> 
    <div class="offset1 span8 pull-right"> 
    ... Widget 1... 
    </div> 

    <div class="offset1 span8 pull-left" style="bottom:0;"> 
    ... Widget 2... 
    </div> 

    .... a lot of content .... 

    </div> 

</div><!--/.fluid-container-->

ho questo come un risultato:

enter image description here

Moving Widget 2 verso il basso anche non aiuta:

<div class="container-fluid"> 
    <div class="row-fluid"> 
    <div class="offset1 span8 pull-right"> 
     ... Widget 1... 
    </div> 
     .... a lot of content .... 
    <div class="span8 pull-left" style="bottom:0;margin-left: 0;"> 
     ... Widget 2... 
    </div> 
    </div> 
</div><!--/.fluid-container-->

enter image description here

Qualche idea su come farlo senza gli hack sporchi (ad esempio, potrei usare JavaScript per correggere la posizione di Widget2)?

Oppure (ok, ok) con loro?

fonte

2012-11-26 kostik

Perché non in basso: 0 funziona? Il genitore è relativamente posizionato? – danwellman

inserisci il tuo codice ... – Sowmya

@danwellman - No, non lo è. Ho aggiunto il codice reale alla domanda. – kostik

Da tutto quello che ho letto non puoi fare esattamente quello che vuoi senza javascript. Se galleggiante sinistra prima del testo

<div style="float:left;">widget</div> here is some CONTENT, etc.

I suoi impacchi di contenuti come previsto. Ma il tuo widget è in alto a sinistra. Se invece mettere il galleggiante dopo che il contenuto

here is some CONTENT, etc. <div style="float:left;">widget</div>

Poi sul suo sito web andrà a capo l'ultima riga a destra del widget se l'ultima riga del contenuto può andare bene alla destra del widget, altrimenti nessuno involucro è fatto . Per rendere bordi e sfondi in realtà comprendono l'area galleggiava nell'esempio precedente, la maggior parte delle persone aggiungere:

here is some CONTENT, etc. <div style="float:left;">widget</div><div style="clear:both;"></div>

Nella tua domanda si sta utilizzando bootstrap che aggiunge solo row-fluid::after { content: ""} che risolve la questione dei confini/sfondo.

Spostando il contenuto fino vi darà l'involucro di una riga: http://jsfiddle.net/jJNPY/34/

<div class="container-fluid"> 
    <div class="row-fluid"> 
    <div class="offset1 span8 pull-right"> 
    ... Widget 1... 
    </div> 
    .... a lot of content .... 
    <div class="span8" style="margin-left: 0;"> 
    ... Widget 2... 
    </div> 


    </div> 

</div><!--/.fluid-container-->

fonte

2012-11-26 15:26:53

Grazie, ma non funziona: http://dl.dropbox.com/u/4075902/Layout2.jpg. Vedete, il contenuto non scorre alla destra del widget – kostik

Il mio funziona bene nell'esempio jsfiddle che ho postato. Dovrai mostrarmi un esempio che non funziona per risolverlo. –

Ok, ho fatto un po 'di test e il modo in cui decide di avvolgere il testo in basso a destra non è sempre intuitivo. Sembra che se l'ultima riga di testo si adatta alla larghezza a destra del widget2, la metterà lì, altrimenti manterrà l'ultima riga di contenuto sopra widget2. Aggiornerò la soluzione con informazioni –

Capisco che si desidera che il Widget2 condividere il bordo inferiore con il contenuto div. Prova ad aggiungere

style="position: relative; bottom: 0px"

al tag Widget2. Prova anche:

style="position: absolute; bottom: 0px"

se si desidera scattare il widget nella parte inferiore dello schermo.

Sono un po 'arrugginito con i CSS, forse lo stile corretto è "margin-bottom: 0px" invece "bottom: 0px", provatelo.Anche la classe pull-right sembra aggiungere uno stile "float = right" all'elemento, e non sono sicuro di come questo si comporti con "position: relative" e "position: absolute", vorrei rimuoverlo.

fonte

2014-03-05 23:13:18 rodix

Div Floating nel layout Bootstrap

risposta

Problemi correlati