utilizzare bootstrap per progettare la mia web UI, e ora ho un requisito, come di seguito:Come utilizzare bootstrap per nascondere uno dei div quando le finestre del browser zoom dimensione più piccola

definisco la sottostante struttura di div come loro ID div sono: part1 e part2

<div class="container"> 
     <div class="panel panel-default"> 
      <div class="panel-body"> 
       <div id="part1" class="col-md-6"> 
        <div> 
         xxxx 
        </div> 
       </div> 
       <div id="part2" class="col-md-6"> 
        <div> 
         yyy 
        </div> 
       </div> 
      </div> 
     </div> 
    </div>

Ora voglio nascondere la part1 automaticamente quando le dimensioni finestra del browser o il mio strizzacervelli browser del telefono, come posso ottenere questo effetto?

BTW: provo ad aggiungere css "collapse" a part1 come, ma si nasconde direttamente anche il mio browser è più grande.

fonte

2013-08-26 Jerry Cai

Si tratta di un codice di lavoro, ho provato .. Risposta

<div class="row"> 
    <div class="col-md-4">.col-md-4</div> 
    <div class="col-md-4 ">.col-md-4</div> 
    <div class="col-md-4 visible-lg">.col-md-4</div> 
    </div>

fonte

2013-08-26 10:03:27

Sì, funziona, ma il suo comportamento è strano o imprevisto, dal momento che se ridimensiono il browser su dimensioni md, funziona, ma quando continuo ridimensionare le dimensioni del browser a più piccole come sm, ma non può essere nascosto. Sai qualcosa sulle funzionalità min-size o max-size? Sono un uomo nuovo sul web design e bootstrap, grazie in anticipo. –

Se è necessaria una soluzione con min-widtha e larghezza massima, è necessario utilizzare le query multimediali –

Potrebbe fornirmi un breve codice dimostrativo basato sul bootstrap? Grazie ancora . –

classi Usa visiblity in bootstrap nascosto-phone nascosto-tablet in base alle proprie esigenze

<div class="container"> 
    <div class="panel panel-default"> 
     <div class="panel-body"> 
      <div id="part1" class="col-md-6 hidden-phone"> 
       <div> 
        xxxx 
       </div> 
      </div> 
      <div id="part2" class="col-md-6"> 
       <div> 
        yyy 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

fonte

2013-08-26 09:33:28

Grazie per le vostre soluzioni, ma ancora non in grado di nascosto, quando a ridimensionare il mio browser diventano più piccoli. –

quale versione di bootstrap stai usando? hai incluso bootstrap-responsive.css –

Ciao, Prasanna, io uso il bootstrap 3.0 –

giusto per Bootstrap 3

Utilizzare classi di utilità per mostrare e nascondere il contenuto in base a criteri tramite query multimediale. Prova a utilizzare questi termini su base limitata ed evita di creare versioni completamente diverse del sito smae. Invece, usali per completare la presentazione di ogni dispositivo.

Screenshot of Bootstrap responsive utility classes

Fonte: http://getbootstrap.com/css/#responsive-utilities

fonte

2015-03-25 05:15:59

Come utilizzare bootstrap per nascondere uno dei div quando le finestre del browser zoom dimensione più piccola

risposta

giusto per Bootstrap 3

Problemi correlati