dir.by  
Программирование, разработка, тестирование
Bootstrap - кнопки, меню, диалог, slider ... Контейнеры для размещения элементов
class="mr-auto" отодвинуть в правый край , class="ml-auto" отодвинуть в левый край | Bootstrap 4.0
  Посмотрели 5898 раз(а)    
 class="mr-auto" class="ml-auto" В Bootstrap 4.0 
последнее обновление: 10 января 2019
class="mr-auto" отодвинуть элементы в правый край
class="ml-auto" отодвинуть элементы в левый край
Пример 1 mr-auto
Исходный код
  Html  
<html>

<!-- title -->
<head>
<meta charset="utf-8">
<title>Example</title>
</head>

<body>
     <!-- подключить библиотеку jQuery -->
     <script src="https://dir.by/example_lib/jquery/jquery-3.3.1.min.js"></script>

     <!-- подключить библиотеку Bootstrap (js файл) -->
     <script src="https://dir.by/example_lib/bootstrap-4.1.3/js/bootstrap.min.js"></script>
    
     <!-- подключить библиотеку Bootstrap (css файл) -->
     <link rel="stylesheet" href="https://dir.by/example_lib/bootstrap-4.1.3/css/bootstrap.min.css">

     <!-- HTML элементы -->
     <div class="d-flex bg-secondary">
          <div class="p-2 mr-auto bg-info">Flex item 1</div>
          <div class="p-2 bg-warning">Flex item 2</div>
          <div class="p-2 bg-primary">Flex item 3</div>
     </div>

</body>
</html>
Пример 2 ml-auto
Исходный код
  Html  
<html>

<!-- title -->
<head>
<meta charset="utf-8">
<title>Example</title>
</head>

<body>
     <!-- подключить библиотеку jQuery -->
     <script src="https://dir.by/example_lib/jquery/jquery-3.3.1.min.js"></script>

     <!-- подключить библиотеку Bootstrap (js файл) -->
     <script src="https://dir.by/example_lib/bootstrap-4.1.3/js/bootstrap.min.js"></script>
    
     <!-- подключить библиотеку Bootstrap (css файл) -->
     <link rel="stylesheet" href="https://dir.by/example_lib/bootstrap-4.1.3/css/bootstrap.min.css">

     <!-- HTML элементы -->
     <div class="d-flex bg-secondary">
          <div class="p-2 bg-info">Flex item 1</div>
          <div class="p-2 bg-warning">Flex item 2</div>
          <div class="p-2 ml-auto bg-primary">Flex item 3</div>
     </div>

</body>
</html>
 
← Предыдущая тема
class="navbar-expand-lg" исчезает если размер области меньше lg | Bootstrap 4.0
 
Следующая тема →
Отступы по вертикали, горизонтали | Bootstrap 4.0
 
Ваши Отзывы ... комментарии ...
   
Вашe имя
Ваш комментарий (www ссылки может добавлять только залогиненный пользователь)

Экскурсии по Москве Экскурсии по Москве: пешеходные, автобусные и речные прогулки на любой вкус
  Объявления  
  Объявления  
 
Что такое Bootstrap?
Bootstrap где скачать и как подключить?
Контейнеры В Bootstrap ("container-fluid" и "container")
Bootstrap версия 4.0
Bootstrap 4 отличие от Bootstrap 3
элементы
"Navbar" В Bootstrap 4.0 - это главное горизонтальное меню для сайта (навигационные заголовки)
стили
class="form-inline" элементы на одной строке | Bootstrap 4.0
class="navbar-expand-lg" исчезает если размер области меньше lg | Bootstrap 4.0
class="mr-auto" отодвинуть в правый край , class="ml-auto" отодвинуть в левый край | Bootstrap 4.0
Отступы по вертикали, горизонтали | Bootstrap 4.0
для изучения
WEB Сайты для изучения Bootstrap 4.0
Bootstrap элементы для версии 3 и 4
Создание сетки "col-md-число" В Bootstrap 3 и Bootstrap 4
WWW сайты для изучения Bootstrap
Сайты для изучения Bootstrap

  Ваши вопросы присылайте по почте: info@dir.by  
Яндекс.Метрика