używam bootstrap zaprojektować My Web UI, a teraz mam wymóg, jak poniżej:Jak korzystać bootstrap ukryć jedną z div, gdy okna przeglądarki powiększenia rozmiaru mniejszego

zdefiniować poniżej strukturze div jako ich div id są: part1 i 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>

teraz chcę ukryć part1 automatycznie, gdy rozmiar okna przeglądarki skurczowej lub moja przeglądarka telefonu, jak mogę osiągnąć ten efekt?

BTW: Próbuję dodać css "collapse" do part1 jako, ale ukrywa się bezpośrednio nawet moja przeglądarka jest większa.

Źródło

2013-08-26 Jerry Cai

to jest kod roboczych, ja testowałem ..

<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>

Źródło

2013-08-26 10:03:27

Tak, działa, ale jego zachowanie jest dziwne lub nieprzewidziane, Ponieważ jeśli zmieniam rozmiar przeglądarki na rozmiar Md, to działa, ale kiedy będę kontynuować zmianę rozmiaru przeglądarki do mniejszego jak sm, ale nie można go ukryć. Czy wiesz coś o funkcjach związanych z min-size lub max-size? Jestem świeżo upieczonym facetem w projektowaniu stron internetowych i bootstrapie, z góry dziękuję. –

Jeśli potrzebujesz rozwiązania wykorzystującego min-widtha i max-width, musisz użyć zapytań o media –

Czy możesz podać krótki kod demonstracyjny oparty na bootstrapie? Jeszcze raz dziękuję . –

klas Zastosowanie visiblity w bootstrap ukrytych telefonu ukrytych tabletki na bazie wymagań

<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>

Źródło

2013-08-26 09:33:28

Dzięki za rozwiązaniami, ale to wciąż nie może ukryć kiedy rozmiaru moja przeglądarka stają się coraz mniejsze. –

jakiej wersji bootstrap używasz? czy włączyłeś bootstrap-responsive.css –

Cześć, Prasanna, używam bootstrap 3.0 –

prawidłowa odpowiedź na Bootstrap 3

Skorzystaj z klas narzędziowych do pokazywania i ukrywania zawartości za pomocą zapytania za pomocą zapytania o media. Staraj się korzystać z tych ograniczeń w ograniczonym zakresie i unikaj tworzenia całkowicie różnych wersji strony internetowej Smae. Zamiast tego użyj ich do uzupełnienia prezentacji każdego urządzenia.

Screenshot of Bootstrap responsive utility classes

Źródło: http://getbootstrap.com/css/#responsive-utilities

Źródło

2015-03-25 05:15:59

Jak korzystać bootstrap ukryć jedną z div, gdy okna przeglądarki powiększenia rozmiaru mniejszego

Odpowiedz

prawidłowa odpowiedź na Bootstrap 3

Powiązane problemy