È possibile utilizzare il sistema di layout della griglia fluida di Bootstrap in combinazione con le funzionalità ordinabili di jQuery UI?

Question

Ho un layout Bootstrap fluido con tre span4 all'interno di un div fluid fluid. Questo sembra e funziona come me lo aspetterei. Chiamando .sortable(); sull'elemento riga funziona, ma durante il trascinamento, il layout diventa stranamente imprevedibile. Ecco un link: http://jsfiddle.net/dhilowitz/CwcKg/15/. Se prendi l'articolo 3 e lo sposti a sinistra, si comporta esattamente come mi aspetterei. Se prendi l'oggetto n. 1 e lo sposti correttamente, tuttavia, l'inferno si spezza e l'oggetto n. 3 si sposta sulla riga successiva.

JSFiddle:http://jsfiddle.net/dhilowitz/CwcKg/15/

HTML:

<div class="container-fluid"> 
    <div class="row-fluid sortme"> 
     <div class="span4 element"><h2>Item #1</h2><p>Lorem ipsum dolor sit amet, consectetur</p></div> 
     <!--/span--> 
     <div class="span4 element"><h2>Item #2</h2><p>Lorem ipsum dolor sit amet, consectetur</p></div> 
     <!--/span--> 
     <div class="span4 element"><h2>Item #3</h2><p>Lorem ipsum dolor sit amet, consectetur</p></div> 
     <!--/span--> 
    </div> 
    <!--/row--> 
</div> 
<!--/.fluid-container--> 

Javascript:

$(".row-fluid").sortable(); 

CSS:

Answer 1

Il problema sembra essere nella classe .container-fluid, il cst di avvio ha il riempimento sinistro e destro che causa il problema.

Questa è la regola di bootstrap.min.css:

.container-fluid { 
    padding-right: 20px; 
    padding-left: 20px; 
} 

si può provare con questa nuova normativa, in accordo con questo post: Jquery UI sortable with bootstrap bugs:

.ui-sortable-placeholder { 
    margin-left: 0 !important; 
} 

.container-fluid { 
    padding-right: 0; 
    padding-left: 0; 
} 

Se avete bisogno di qualche extra padding, puoi mettere il tuo codice in div esterno.

buon codice

Answer 2

Anche se ho accettato la risposta di cui sopra, ho voluto fornire la soluzione che ero venuto con nel frattempo, come penso che potrebbe essere utile per il debug di altre collisioni jQuery + Twitter Bootstrap. Invece di applicare il margin-left a tutti .ui-ordinabili-segnaposto, li ho applicati durante l'avvio evento e rimosso durante fermata eventi del ordinabile. Ho anche utilizzato appendTo per specificare che l'helper deve essere aggiunto al corpo del documento e non all'interno di .

CSS

.real-first-child { 
    margin-left:0 !important; 
} 

Javascript

$(".row-fluid").sortable({ 
    placeholder: 'span4', 
    helper: 'clone', 
    appendTo: 'body', 
    forcePlaceholderSize: true, 
    start: function(event, ui) { 
     $('.row-fluid > div.span4:visible:first').addClass('real-first-child'); 
    }, 
    stop: function(event, ui) { 
     $('.row-fluid > div.real-first-child').removeClass('real-first-child'); 
    }, 
    change: function(event, ui) { 
     $('.row-fluid > div.real-first-child').removeClass('real-first-child'); 
     $('.row-fluid > div.span4:visible:first').addClass('real-first-child'); 
    } 
}); 

Link: http://jsfiddle.net/dhilowitz/s7Kch/