Загрузчик 4 горизонтальное выравнивание переключателя не удается

Я использую элемент переключения Material Design Lite в моей платформе Bootstrap 4 и не могу выровнять элемент по правой стороне столбца.

Обратите внимание, что класс "float-right" прекрасно работает для элемента Bootstrap (кнопка). Я также попытался применить класс "text-right" к контейнеру, а также justify-content-end, justify-content: flex-end, pull-right и т.д... ничего не работает.

<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css" rel="stylesheet" />

<body>
  <div class="container">
    <div class="row">
      <div class="col-8">Text row 1</div>
      <div class="col-4 float-right">
        <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect float-right" for="switch-1">
            <input type="checkbox" id="switch-1" class="mdl-switch__input float-right" checked>
          </label>
      </div>
    </div>
    <div class="row">
      <div class="col-8">Text row 2</div>
      <div class="col-4 float-right">
        <button type="button" class="btn btn-primary float-right">Submit</button>
      </div>
    </div>
  </div>
  </div>
</body>

Как я могу выровнять элемент по правой стороне столбца? Для контекста я пытаюсь получить макет, аналогичный настройкам в Chrome (текст выровнен по левому краю, переключатель выровнен по правому краю):

Источник

1 ответ

Решение

С помощью правила CSS вы можете переместить его вправо. Поскольку он плавающий, вам нужно поиграть с отступами, чтобы выстроить его в ряд. Другой вариант - поместить элементы управления в div.col-1 и давая им меньше места для передвижения.

label.mdl-switch { width: auto !important; }
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css" rel="stylesheet" />

<body>
  <div class="container">
    <div class="row">
      <div class="col-8">Text row 1</div>
      <div class="col-4 float-right">
        <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect float-right" for="switch-1">
            <input type="checkbox" id="switch-1" class="mdl-switch__input" checked>
          </label>
      </div>
    </div>
    <div class="row">
      <div class="col-8">Text row 2</div>
      <div class="col-4 float-right">
        <button type="button" class="btn btn-primary float-right">Submit</button>
      </div>
    </div>
  </div>
</body>

Источник
Другие вопросы по тегам