2014-09-30 6 views
8

Utilizzando bootstrap 2, quale sarebbe il metodo più semplice per disporre di una colonna di larghezza statica sulla sinistra e avere la colonna di destra sia fluida. Qualcosa del genere con una colonna a sinistra di 200 px di larghezza e il diritto di riempire la finestra del browser con .È possibile avere un sistema di griglia ibrida fluido/non fluido?

====================== 
Hello 
====================== 
A | 
B |  100% 
200px| 
D | 
E | 
F | 

ho provato ad aggiungere un min-width a un layout contenitore di regolare ma hanno un comportamento strano quando il ridimensionamento:

<div class="container-fluid"> 

    <div class="row-fluid"> 
     <div class="span12">Hello</div> 
    </div> 

    <div class="row-fluid"> 
     <div class="span2" style="min-width:200px">Left Column</div> 
     <div class="span10">Right Column</div> 
    </div> 

</div> 

Ecco un violino JS pure se il layout quad di fiddle js sé sembra aggiungere il proprio comportamento.

http://jsfiddle.net/BVmUL/882/

risposta

10

Breve risposta alla tua domanda è NO. Bootstrap 2 utilizza le query multimediali e le misure percentuali per ottenere i loro layout di griglia reattivi. Cercare di creare un approccio ibrido con Bootstrap 2 è completamente ridondante.

Puoi provare questo approccio. Usa float:left; sulla colonna di sinistra e dai un padding-left:200px; alla colonna di destra e il gioco è fatto. Hai disegnato il tuo layout. Aggiunto clearfix in fondo in modo da poter utilizzare un footer in futuro, se lo desideri. In questo modo si mantiene il supporto per la maggior parte dei browser.

check JsFiddle Demo

HTML

<div class="container-fluid"> 

    <div class="row-fluid"> 
     <div class="span12 header">Hello</div> 
    </div> 

    <div class="row-fluid"> 
     <div class="span2 left-col">Left Left Left Left Left Left Left</div> 
     <div class="span10 right-col">Right Right Right Right Right Right Right </div> 
    </div> 

</div> 
    <div class="clearfix"></div> 

CSS

.header{ 
    background-color:#f00; 
} 
.left-col{ 
    background-color:#0f0; 
    float:left; 
    width:200px; 
    height:400px; 
} 
.right-col{ 
    background-color:#00f; 
    height:400px; 
    padding-left:200px; 
} 

Dopo di che è possibile utilizzare Javascript per regolare dinamicamente la larghezza della colonna di sinistra e l'imbottitura colonna di destra sulla finestra di ridimensionamento.

Si potrebbe anche prendere in considerazione le seguenti alternative:

1. Calc() (IE9 + solo)

Se non si preoccupano IE8- supportano questo è il modo più semplice per ottenere esso. Si può imparare here

2. Media Queries (solo IE9 +)

È possibile utilizzare Media Queries, proprio come Bootstrap fa, ma non è possibile utilizzare le misure percentuali calcolati per ottenere quello che stai cercando. Puoi usarlo per cambiare i valori delle proprietà css e renderlo reattivo (con le tue limitazioni personalizzate) in questo modo.

3. Flexbox (IE10 + solo (parziale IE9))

sarà grande, ma non consigliato per ora a causa del supporto del browser.

4. Tabelle

Prendere this thread di sapere perché non si dovrebbe usare.

+0

+1 miglior risposta finora – Novocaine

+0

questo è un compagno di trucco fantastico .... mi sento davvero come un Noob +1! :) – NoobEditor

+0

Se ti piace l'altezza dinamica non hai bisogno di nessuna dichiarazione di altezza o riempimento se usi l'overflow: nascosto; per la colonna giusta Vedi questo [fiddle] (http://jsfiddle.net/6nspucuf/) – RWAM

2

Quindi fondamentalmente vuole che la colonna destra per adattarsi allo spazio disponibile.

Hai 5 opzioni che non sono specifici per l'avvio, ma in generale HTML/CSS:

1) Utilizzare calc

.left-col { 
     width: 200px; 
    } 
    .right-col { 
     width: calc(100% - 200px); 
    } 

che esclude, ovviamente, IE8 e altri browsers that do not support calc.

2) utilizzare galleggiante Non ci ho pensato. Controlla @henser's answer per quello. Sembra funzionare piuttosto bene, anche se avevo l'impressione che il right-col si interromperebbe se non ci fosse abbastanza spazio disponibile per il suo contenuto. Apparentemente ho sbagliato: questo sembra essere il metodo migliore se vuoi supportare i browser più vecchi.

3) utilizzare FlexBox Che è un po 'più di lavoro e forse complicato, ma posso consigliare this great guide per iniziare con FlexBox. Ovviamente excludes old IE versions.

4) utilizzare le tabelle Brutto, non proprio consigliato ma supporta tutti i browser.

5) Javascript è possibile utilizzare JavaScript per calcolare lo spazio rimanente. Ma ovviamente è necessario licenziare il ridimensionamento. Non consigliato in quanto non è veloce come le altre opzioni.

// jQuery example 
$('.right-col').width($(window).width() - $('.left-col').width());