Ir ao contido principal Ir á navegación de documentos
Check
in English

Flotar

Alterna os flotadores en calquera elemento, en calquera punto de interrupción, usando as nosas utilidades de flotación sensibles.

Nesta páxina

Visión xeral

Estas clases de utilidade fan flotar un elemento á esquerda ou á dereita, ou desactivan a flotación, en función do tamaño da ventana gráfica actual usando a propiedade CSSfloat . !importantinclúese para evitar problemas de especificidade. Estes usan os mesmos puntos de interrupción da vista que o noso sistema de cuadrícula. Ten en conta que as utilidades flotantes non teñen ningún efecto nos elementos flexibles.

Inicio flotante en todos os tamaños de vistas

Extremo flotante en todos os tamaños de vistas

Non flote en todos os tamaños de vistas
html
<div class="float-start">Float start on all viewport sizes</div><br>
<div class="float-end">Float end on all viewport sizes</div><br>
<div class="float-none">Don't float on all viewport sizes</div>

Sensible

Tamén existen variacións de resposta para cada floatvalor.

Inicio flotante en visores de tamaño SM (pequeno) ou máis anchos

Inicio flotante en visores de tamaño MD (mediano) ou máis anchos

Inicio flotante en visores de tamaño LG (grande) ou máis anchos

Inicio flotante en visores de tamaño XL (extragrande) ou máis anchos

html
<div class="float-sm-start">Float start on viewports sized SM (small) or wider</div><br>
<div class="float-md-start">Float start on viewports sized MD (medium) or wider</div><br>
<div class="float-lg-start">Float start on viewports sized LG (large) or wider</div><br>
<div class="float-xl-start">Float start on viewports sized XL (extra-large) or wider</div><br>

Aquí están todas as clases de apoio:

  • .float-start
  • .float-end
  • .float-none
  • .float-sm-start
  • .float-sm-end
  • .float-sm-none
  • .float-md-start
  • .float-md-end
  • .float-md-none
  • .float-lg-start
  • .float-lg-end
  • .float-lg-none
  • .float-xl-start
  • .float-xl-end
  • .float-xl-none
  • .float-xxl-start
  • .float-xxl-end
  • .float-xxl-none

Sass

API de utilidades

As utilidades flotantes decláranse na nosa API de utilidades en scss/_utilities.scss. Aprende a usar a API de utilidades.

    "float": (
      responsive: true,
      property: float,
      values: (
        start: left,
        end: right,
        none: none,
      )
    ),