Рубрики

.pull-left и .pull-right классы в Bootstrap 4

Bootstrap, Веб-технологии, Веб-технологии Вопросы

Классы .pull-left и .pull-right были заменены классами .float-left и .float-right в Bootstrap 4. Эти служебные классы используются для перемещения элемента влево или вправо в зависимости от размеров окна просмотра. на сетке начальной загрузки. Работает с использованием свойства float CSS.

Использование классов .pull-left и .pull-right
Эти классы помогают перемещать элементы:

  • Класс .pull-left используется для перемещения элемента влево.
  • Класс .pull-right используется для перемещения элемента вправо.

Пример:

<!DOCTYPE html>

<html>

  

<head>

    <title>Bootstrap Floating utility class</title>

  

    <! - Включить Bootstrap CSS ->

    <link rel="stylesheet" 

          href=

"https://stackpath.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

</head>

  

<body>

    <div class="container">

        <h1 style="color:green">

          GeeksforGeeks

      </h1>

        <b>Bootstrap Floating utility class</b>

        <br>

  

        <div class="pull-left">

          This div floats to the left.

      </div>

        <br>

        <div class="pull-right">

          This div floats to the right.

      </div>

        <br>

    </div>

</body>

  

</html>

Выход:

Базовые классы
Есть три класса, которые помогают в плавании элементов:

  • Класс .float-left используется для перемещения элемента влево.
  • Класс .float-right используется для перемещения элемента вправо.
  • Класс .float-none используется для отключения плавающего объекта .

Эти классы будут работать со всеми размерами области просмотра, если они не указаны с использованием их адаптивных версий.

Пример:

<!DOCTYPE html>

<html>

  

<head>

    <title>

      Bootstrap 4 Floating utility class

  </title>

  

    <! - Включить Bootstrap CSS ->

    <link rel="stylesheet"

          href=

"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

</head>

  

<body>

  

    <div class="container">

        <h1 style="color:green">

          GeeksforGeeks

      </h1>

        <b>Bootstrap 4 Floating utility class</b>

        <br>

  

        <div class="float-left">

          This div floats to the left.

      </div>

        <br>

        <div class="float-right">

          This div floats to the right.

      </div>

        <br>

        <div class="float-none">

          This div does not float.

      </div>

    </div>

</body>

  

</html>

Выход:

Отзывчивый плавающий в зависимости от размеров области просмотра
Адаптивные вариации базовых классов можно использовать для применения плавающих значений только к указанным размерам области просмотра. Существует четыре варианта размера окна просмотра.

  • см: это маленькая точка останова. Все классы, использующие это, будут перемещаться в области просмотра размером меньше или шире.
  • MD: Это средняя точка останова. Все классы, использующие это, будут перемещаться по средним или более широким областям просмотра.
  • LG: это большая точка останова. Все классы, использующие это, будут перемещаться в области просмотра размером больше или шире.
  • XL: это очень большая точка останова. Все классы, использующие это, будут перемещаться в области просмотра, размер которых слишком велик или шире.

Пример:

<!DOCTYPE html>

<html>

  

<head>

    <title>Responsive variations

      with float</title>

  

    <! - Включить Bootstrap CSS ->

    <link rel="stylesheet" 

          href=

"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

</head>

  

<body>

  

    <div class="container">

        <h1 style="color:green">GeeksforGeeks</h1>

        <b>Responsive variations with float</b>

        <br>

  

        <div class="float-sm-left">

          This div floats to the left on small or wider viewports.

      </div>

        <br>

        <div class="float-sm-right">

          This div floats to the right on small or wider viewports.

      </div>

        <br>

        <div class="float-sm-none">

          This div does not float on small or wider viewports.

      </div>

  

        <div class="float-md-left">

          This div floats to the left on medium or wider viewports.

      </div>

        <br>

        <div class="float-md-right">

          This div floats to the right on medium or wider viewports.

      </div>

        <br>

        <div class="float-md-none">

          This div does not float on medium or wider viewports.

      </div>

  

        <div class="float-lg-left">

          This div floats to the left on large or wider viewports.

      </div>

        <br>

        <div class="float-lg-right">

          This div floats to the right on large or wider viewports.

      </div>

        <br>

        <div class="float-lg-none">

          This div does not float on large or wider viewports.

      </div>

  

        <div class="float-xl-left">

          This div floats to the left on extra large or wider viewports.

      </div>

        <br>

        <div class="float-xl-right">

          This div floats to the right on extra large or wider viewports.

      </div>

        <br>

        <div class="float-xl-none">

          This div does not float on extra large or wider viewports.

      </div>

    </div>

</body>

  

</html>

Выход:

Рекомендуемые посты:

.pull-left и .pull-right классы в Bootstrap 4

0.00 (0%) 0 votes