{"id":235557,"date":"2022-05-29T18:16:55","date_gmt":"2022-05-29T16:16:55","guid":{"rendered":"http:\/\/cintecx.uvigo.es\/?page_id=235557"},"modified":"2022-12-23T21:57:21","modified_gmt":"2022-12-23T20:57:21","slug":"columnas-bootstrap","status":"publish","type":"page","link":"https:\/\/cintecx.uvigo.es\/es\/columnas-bootstrap\/","title":{"rendered":"Columnas bootstrap"},"content":{"rendered":"<p><!-- Se po\u00f1o s\u00f3 col-6 e d\u00faas ou m\u00e1is columnas a fila ser\u00e1 de d\u00faas columnas para todos os dispositivos, non s\u00f3 para m\u00f3bil. Se noutros dispositivos quero m\u00e1is columnas hai que especificalo --><\/p>\n<div class=\"row\">\n<div class=\"col-6 col-sm-6 col-lg-4\">1 columna<\/div>\n<div class=\"col-6 col-sm-6 col-lg-4\">2 columna<\/div>\n<div class=\"col-6 col-sm-6 col-lg-4\">3 columna<\/div>\n<\/div>\n<p><!-- A\u00ednda que haxa 6 columnas na fila, ao indicar para PC 3 columnas, s\u00f3 far\u00e1 tres e o resto ponas abaixo --><\/p>\n<div class=\"row\">\n<div class=\"col-6 col-sm-6 col-lg-4\">4 columna<\/div>\n<div class=\"col-6 col-sm-6 col-lg-4\">5 columna<\/div>\n<div class=\"col-6 col-sm-6 col-lg-4\">6 columna<\/div>\n<div class=\"col-6 col-sm-6 col-lg-4\">7 columna<\/div>\n<div class=\"col-6 col-sm-6 col-lg-4\">8 columna<\/div>\n<div class=\"col-6 col-sm-6 col-lg-4\">9 columna<\/div>\n<\/div>\n<p><!-- Ao por s\u00f3 col, sen indicar n\u00famero de columnas nin dispositivo, pon todas as columnas na mesma fila en todos os dispositivos e se non caben, baixan \u00e1 seguinte fila. Columnas de ancho autom\u00e1tico.--><\/p>\n<div class=\"row\">\n<div class=\"col\">10 columna<\/div>\n<div class=\"col\">11 columna<\/div>\n<div class=\"col\">12 columna<\/div>\n<div class=\"col\">13 columna<\/div>\n<div class=\"col\">14 columna<\/div>\n<div class=\"col\">15 columna<\/div>\n<\/div>\n<p>&nbsp;<\/p>\n<p><!-- Aqu\u00ed ser\u00edan 6 columnas dende o tama\u00f1o m\u00e1is pequeno para adiante pero estou forzando o tama\u00f1o, non son de tama\u00f1o autom\u00e1tico, polo que no exemplo de arriba, que son de tama\u00f1o autom\u00e1tico, para m\u00f3bil por\u00e1 3 columnas en d\u00faas filas e aqu\u00ed por\u00e1 as 6 columnas (ou as que collan segundo tama\u00f1o do m\u00f3bil) nunha soa fila. --><\/p>\n<div class=\"row\">\n<div class=\"col-2\">10 columna<\/div>\n<div class=\"col-2\">11 columna<\/div>\n<div class=\"col-2\">12 columna<\/div>\n<div class=\"col-2\">13 columna<\/div>\n<div class=\"col-2\">14 columna<\/div>\n<div class=\"col-2\">15 columna<\/div>\n<\/div>\n<p>&nbsp;<\/p>\n<div class=\"row\">\n<div class=\"col-1\">10 columna<\/div>\n<div class=\"col-1\">11 columna<\/div>\n<div class=\"col-1\">12 columna<\/div>\n<div class=\"col-1\">13 columna<\/div>\n<div class=\"col-1\">14 columna<\/div>\n<div class=\"col-1\">15 columna<\/div>\n<div class=\"col-1\">10 columna<\/div>\n<div class=\"col-1\">11 columna<\/div>\n<div class=\"col-1\">12 columna<\/div>\n<div class=\"col-1\">13 columna<\/div>\n<div class=\"col-1\">14 columna<\/div>\n<div class=\"col-1\">15 columna<\/div>\n<\/div>\n<p>&nbsp;<br \/>\n<!-- Neste caso establ\u00e9cense columnas de ancho autom\u00e1tico (6) dende o tama\u00f1o md para adiante. Para os outros dous m\u00e1is pequenos verase unha soa columna por fila. --><\/p>\n<div class=\"row\">\n<div class=\"col-md\">20 columna<\/div>\n<div class=\"col-md\">21 columna<\/div>\n<div class=\"col-md\">22 columna<\/div>\n<div class=\"col-md\">23 columna<\/div>\n<div class=\"col-md\">24 columna<\/div>\n<div class=\"col-md\">25 columna<\/div>\n<\/div>\n<p>&nbsp;<\/p>\n<p><!-- Se se indica dispositivo e n\u00famero de columnas, para os dispositivos inferiores nos que non se indique nada, colapsan as columnas da primeira fila e verase unha debaixo doutra --><\/p>\n<div class=\"row\">\n<div class=\"col-lg-1\">10 columna<\/div>\n<div class=\"col-lg-1\">11 columna<\/div>\n<div class=\"col-lg-1\">12 columna<\/div>\n<div class=\"col-lg-1\">13 columna<\/div>\n<div class=\"col-lg-1\">14 columna<\/div>\n<div class=\"col-lg-1\">15 columna<\/div>\n<div class=\"col-lg-1\">10 columna<\/div>\n<div class=\"col-lg-1\">11 columna<\/div>\n<div class=\"col-lg-1\">12 columna<\/div>\n<div class=\"col-lg-1\">13 columna<\/div>\n<div class=\"col-lg-1\">14 columna<\/div>\n<div class=\"col-lg-1\">15 columna<\/div>\n<\/div>\n<p>&nbsp;<\/p>\n<div class=\"row\">\n<div class=\"col-lg-3\">10 columna<\/div>\n<div class=\"col-lg-3\">11 columna<\/div>\n<div class=\"col-lg-3\">12 columna<\/div>\n<div class=\"col-lg-3\">13 columna<\/div>\n<div class=\"col-lg-3\">14 columna<\/div>\n<div class=\"col-lg-3\">15 columna<\/div>\n<div class=\"col-lg-3\">10 columna<\/div>\n<div class=\"col-lg-3\">11 columna<\/div>\n<div class=\"col-lg-3\">12 columna<\/div>\n<div class=\"col-lg-3\">13 columna<\/div>\n<div class=\"col-lg-3\">14 columna<\/div>\n<div class=\"col-lg-3\">15 columna<\/div>\n<\/div>\n<p>&nbsp;<\/p>\n<div class=\"row\">\n<div class=\"col-1\">1 columna agrupada<\/div>\n<div class=\"col-11\">11 columnas agrupadas<\/div>\n<\/div>\n<div class=\"row\">\n<div class=\"col-2\">2 columna agrupada<\/div>\n<div class=\"col-10\">10 columnas agrupadas<\/div>\n<\/div>\n<p><!-- Ao por 12 columnas, ou as que sexan, para todos os dispositivos, se nalg\u00fan non caben, baixan \u00e1 fila seguinte. Neste caso nunca colapsar\u00e1n as columnas--><\/p>\n<div class=\"row\">\n<div class=\"col-1\" style=\"margin:20px;\">columna col-1<\/div>\n<p>&nbsp;<\/p>\n<div class=\"col-1\" style=\"margin:20px;\">columna col-1<\/div>\n<p>&nbsp;<\/p>\n<div class=\"col-1\" style=\"margin:20px;\">columna col-1<\/div>\n<p>&nbsp;<\/p>\n<div class=\"col-1\" style=\"margin:20px;\">columna col-1<\/div>\n<p>&nbsp;<\/p>\n<div class=\"col-1\" style=\"margin:20px;\">columna col-1<\/div>\n<p>&nbsp;<\/p>\n<div class=\"col-1\" style=\"margin:20px;\">columna col-1<\/div>\n<p>&nbsp;<\/p>\n<div class=\"col-1\" style=\"margin:20px;\">columna col-1<\/div>\n<p>&nbsp;<\/p>\n<div class=\"col-1\" style=\"margin:20px;\">columna col-1<\/div>\n<p>&nbsp;<\/p>\n<div class=\"col-1\" style=\"margin:20px;\">columna col-1<\/div>\n<p>&nbsp;<\/p>\n<div class=\"col-1\" style=\"margin:20px;\">columna col-1<\/div>\n<p>&nbsp;<\/p>\n<div class=\"col-1\" style=\"margin:20px;\">columna col-1<\/div>\n<p>&nbsp;<\/p>\n<div class=\"col-1\" style=\"margin:20px;\">columna col-1<\/div>\n<p>&nbsp;\n<\/p><\/div>\n<p>&nbsp;<br \/>\nDivs sen flex<\/p>\n<div>\n<div>1 div<\/div>\n<div>2 div<\/div>\n<div>3 div<\/div>\n<div>4 div<\/div>\n<div>5 div<\/div>\n<div>6 div<\/div>\n<\/div>\n<p>&nbsp;<\/p>\n<p><!--  Con wrap ev\u00edtase desbordamento da celda cando o contido non caiba nunha soa fila. O contido que non caiba baixa \u00e1 seguinte fila. Por defecto, nowrap. E dicir con d-flex, os divs comp\u00f3rtanse coma se fosen celdas dunha mesma fila. Con wrap fai que se o contido dun div non cabe nunha fila baixa a seguinte. Se pomos non wrap non baixar\u00e1 e se amosar\u00e1 todo na mesma fila. Ver exemplos no m\u00f3bil. --><br \/>\nDivs con flex e non wrap. Desborda contido dun dos divs no m\u00f3bil.<\/p>\n<div class=\"d-flex  justify-content-start\" style=\"flex-wrap:nowrap;\">\n<div>1 div<\/div>\n<p>&nbsp;<\/p>\n<div>2 div<\/div>\n<p>&nbsp;<\/p>\n<div>3 div<\/div>\n<p>&nbsp;<\/p>\n<div>4 div<\/div>\n<p>&nbsp;<\/p>\n<div>5 div<\/div>\n<p>&nbsp;<\/p>\n<div>6 div<\/div>\n<p>&nbsp;<\/p>\n<div>1 div<\/div>\n<p>&nbsp;<\/p>\n<div>2 div<\/div>\n<p>&nbsp;<\/p>\n<div>3 div<\/div>\n<p>&nbsp;<\/p>\n<div>4 divdivdivdivdivdivdivdivdivdivdivdivdivdiv<\/div>\n<p>&nbsp;<\/p>\n<div>5 div<\/div>\n<p>&nbsp;<\/p>\n<div>6 div<\/div>\n<p>&nbsp;\n<\/p><\/div>\n<p>Divs con flex e con wrap. O contido que antes desbordaba, aogra baixa \u00e1 outra fila.<\/p>\n<div class=\"d-flex  justify-content-start\" style=\"flex-wrap:wrap;\">\n<div>1 div<\/div>\n<p>&nbsp;<\/p>\n<div>2 div<\/div>\n<p>&nbsp;<\/p>\n<div>3 div<\/div>\n<p>&nbsp;<\/p>\n<div>4 div<\/div>\n<p>&nbsp;<\/p>\n<div>5 div<\/div>\n<p>&nbsp;<\/p>\n<div>6 div<\/div>\n<p>&nbsp;<\/p>\n<div>1 div<\/div>\n<p>&nbsp;<\/p>\n<div>2 div<\/div>\n<p>&nbsp;<\/p>\n<div>3 div<\/div>\n<p>&nbsp;<\/p>\n<div>4 divdivdivdivdivdivdivdivdivdivdivdivdivdiv<\/div>\n<p>&nbsp;<\/p>\n<div>5 div<\/div>\n<p>&nbsp;<\/p>\n<div>6 div<\/div>\n<p>&nbsp;\n<\/p><\/div>\n<div class=\"container\">\n<h1>T\u00edtulo<\/h1>\n<p>Container bootstrap.<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>1 columna 2 columna 3 columna 4 columna 5 columna 6 columna 7 columna 8 columna 9 columna 10 columna 11 columna 12 columna 13 &hellip; <a class=\"excerpt_more\" href=\"https:\/\/cintecx.uvigo.es\/es\/columnas-bootstrap\/\">Contin\u00faa<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"views\/template-fullwidth.blade.php","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"class_list":["post-235557","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/cintecx.uvigo.es\/es\/wp-json\/wp\/v2\/pages\/235557","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cintecx.uvigo.es\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cintecx.uvigo.es\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cintecx.uvigo.es\/es\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/cintecx.uvigo.es\/es\/wp-json\/wp\/v2\/comments?post=235557"}],"version-history":[{"count":70,"href":"https:\/\/cintecx.uvigo.es\/es\/wp-json\/wp\/v2\/pages\/235557\/revisions"}],"predecessor-version":[{"id":240861,"href":"https:\/\/cintecx.uvigo.es\/es\/wp-json\/wp\/v2\/pages\/235557\/revisions\/240861"}],"wp:attachment":[{"href":"https:\/\/cintecx.uvigo.es\/es\/wp-json\/wp\/v2\/media?parent=235557"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}