Bootstrap:brak reakcji na hidden-lg-down

Question

Cześć,
tworzę swój pierwszy projekt w Bootstrapie. Chcę użyć klasy hidden-lg-down aby ukryć kolumnę podczas wyświetlania na telefonach. Jednak klasa ta kompletnie nie działa, podczas przełączenia strony w tryb mobilny kolumna nadal jest widoczna. Proszę o pomoc. Oto kod:

<section id="AUs">       
       <div class="container" >
           <div class="row align-items-center" >
               <div class="col-sm-6" hidden-lg-down><img src="img/AboutUs.png"/></div>
               <div class="col-sm-6" id="a1"><h1>About Us</h1>
               <p>Coś tam....</p>
               </div>
           </div>
       </div>
   </section>

 

Answer 1

To bootstrap 3 ? powinno być chyba hidden-lg   samo a nie hidden-lg-down

 

edit:

Więc jesli chcesz ukryc na telefonach to hidden-xs hidden-sm  a  jak na kompach to hidden-lg

	Extra small devices Phones (<768px)	Small devices Tablets (≥768px)	Medium devices Desktops (≥992px)	Large devices Desktops (≥1200px)
.visible-xs-*	Visible	Hidden	Hidden	Hidden
.visible-sm-*	Hidden	Visible	Hidden	Hidden
.visible-md-*	Hidden	Hidden	Visible	Hidden
.visible-lg-*	Hidden	Hidden	Hidden	Visible
.hidden-xs	Hidden	Visible	Visible	Visible
.hidden-sm	Visible	Hidden	Visible	Visible
.hidden-md	Visible	Visible	Hidden	Visible
.hidden-lg	Visible	Visible	Visible	Hidden

Comments

Bootstrap 4. Spróbowałem zmienić na samo hidden-xs  ale nie pomaga.

---

Patrzyłes na tą tabele ? :

 

	Extra small devices Portrait phones (<544px)	Small devices Landscape phones (≥544px - <768px)	Medium devices Tablets (≥768px - <992px)	Large devices Desktops (≥992px - <1200px)	Extra large devices Desktops (≥1200px)
.hidden-xs-down	Hidden	Visible	Visible	Visible	Visible
.hidden-sm-down	Hidden	Hidden	Visible	Visible	Visible
.hidden-md-down	Hidden	Hidden	Hidden	Visible	Visible
.hidden-lg-down	Hidden	Hidden	Hidden	Hidden	Visible
.hidden-xl-down	Hidden	Hidden	Hidden	Hidden	Hidden
.hidden-xs-up	Hidden	Hidden	Hidden	Hidden	Hidden
.hidden-sm-up	Visible	Hidden	Hidden	Hidden	Hidden
.hidden-md-up	Visible	Visible	Hidden	Hidden	Hidden
.hidden-lg-up	Visible	Visible	Visible	Hidden	Hidden
.hidden-xl-up	Visible	Visible	Visible	Visible	Hidden

 

Czyli jak chcesz ukryc na telefonie to .hidden-xs-down albo .hidden-md-down

 

A twoim problemem jest to ze nie trzymasz w class="" tylko poza ""

<div class="col-sm-6" hidden-lg-down>  powinno byc :

<div class="col-sm-6 hidden-lg-down">

 

---

Tak, widziałem tą tabelkę. Poprawiłem i nadal to samo.

---

daj kod poprawiony

---

 <section id="AboutUs">       
       <div class="container" >
           <div class="row align-items-center" >
               <div class="col-sm-6 hidden-lg-down"><img src="img/AboutUs.png"/></div>
               <div class="col-sm-6" id="a1"><h1>About Us</h1>
               <p>A illo inventore.</p>
               </div>
           </div>
       </div>
   </section>

 

---

zamiast j hidden-lg-down dodaj

 d-none d-lg-block 

pierwsza ukrywa element zawsze, ale druga pokazuje go dla rozmiaru powyżej lg

Ale teraz Ci nie powiem dlaczego @media

@media (max-width: 1199px){ 
  .hidden-lg-down {
  display: none;
  } 
}

nie działa.

Nie bawiłem się jeszcze bs4

Poczytaj Hiding Elements