cum să ascundeți o coloană din grilă în versiunea mobilă bootstrap (Programare, Css, Twitter Bootstrap, Twitter Bootstrap 3)

PPShein a intrebat.

Cred că este un pic complicat faptul că vreau să ascund o coloană dintr-o grilă în versiunea mobilă bootstrap. Să arătăm un exemplu

<div class="row">
  <div class="col-xs-9">
    <p class="testimonial-about">"We have managed to received good number of applications through MyJobs in comparison to advertising in the newspaper and would recommend MyJobs to other companies to assist with their recruitment needs"</p>
  </div>
  <div class="col-xs-3 center-image hidden-xs"><img src="myimage.png"/></div>
</div>

Codarea de mai sus, ascund porțiunea de imagine atunci când este vizualizată de un dispozitiv mobil. Ceea ce vreau este că nu vreau ca spațierea porțiunii de imagine chiar dacă este ascunsă ca porțiunea stângă în creștere să ajungă până în partea dreaptă.

Comentarii

  • Pentru Bootstrap 4.1, consultați stackoverflow.com/questions/35351353/… –  > Por Alastair McCormack.
4 răspunsuri
Siva

Din moment ce, ascundeți a doua coloană în „xs”, puteți utiliza lățimea completă pentru prima coloană prin definirea clasei „col-xs-12” pentru column1.

Comentarii

  • Frumos, aceasta este o soluție mult mai bună. –  > Por HTMLNoob.
  • Aceasta este o soluție mai bună. –  > Por PPShein.
  • Acest lucru nu funcționează în noul Bootstrap 4. Ar trebui să utilizați o altă abordare –  > Por Marek.
  • Poate că ar trebui doar să fie notat/actualizat faptul că este un exemplu Bootstrap v3. Nu s-a schimbat. Întrebarea se referea în mod specific la v3, este chiar etichetată. –  > Por Musselman.
Andy Braham

Începând cu Bootstrap V4, se aplică hidden-X au fost eliminate. Pentru a ascunde o coloană pe baza lățimii coloanei, utilizați d-none d-X-block. Practic, pur și simplu dezactivați afișarea dimensiunii pe care doriți să o ascundeți, apoi setați afișarea dimensiunii mai mari.

  • Ascuns pe toate .d-none
  • Ascuns pe xs .d-none .d-sm-block
  • Ascuns pe sm .d-sm-none .d-md-block
  • Ascunse pe md .d-md-none .d-lg-block
  • Ascuns pe lg .d-lg-none .d-xl-block
  • Ascuns pe xl .d-xl-none

Preluat din acest răspuns.

jumps4fun

Dacă folosiți bootstrap 4, și/sau doriți să ascundeți o coloană pe orice altceva decât extra small view, iată cum:

Bootstrap 3:

<div class="row">
  <div class="col-lg-12 col-xl-9">       
  </div>
  <div class="col-xl-3 hidden-lg hidden-md hidden-sm hidden-xs">
  </div>
</div>

cu alte cuvinte, trebuie să definiți fiecare dimensiune predefinită individuală a viewportului în care doriți ca coloana să fie ascunsă.

Bootstrap 4: (un pic mai puțin redundant)

<div class="row">
  <div class="col-lg-12 col-xl-9">       
  </div>
  <div class="col-xl-3 hidden-lg-down">
  </div>
</div>

De asemenea, dacă doriți să ascundeți o coloană dacă ecranul este prea mare:

<div class="row">
  <div class="col-md-12 col-sm-9">       
  </div>
  <div class="col-sm-3 hidden-md-up">
  </div>
</div>

rețineți, de asemenea, că col-xs-[n] a fost înlocuit cu col-[n] în bootstrap 4

HTMLNoob

Ceea ce trebuie să folosești sunt media queries.

Iată un exemplu:

Faceți acest lucru pe ecran complet pentru a vedea răspunsul ecranului