Bootstrap 3 ряда Toggle не совпадает со строкой - PullRequest
Новая
       28

Bootstrap 3 ряда Toggle не совпадает со строкой

0 голосов
/ 29 октября 2018

Мне нужно выровнять переключатель по горизонтали внутри строки, используя загрузчик 3. Я перепробовал все. От flexbox, классов начальной загрузки и принудительного встроенного моделирования, но, похоже, все равно.

HTML код: 

<div class="row ml10 mr10">
    <div class="col-lg-4 col-md-4 col-sm-4 xs-4">
        <button class="btn btn-default btn-sm mb0 mt10 ml10"
            ng-click="TopicCtrl.getTopicData(sql.data, sql.dataProtection);">
            Run Query
        </button>
        <button class="btn btn-danger btn-sm mb0 mt10 ml10"
            ng-if='TopicCtrl.loading'
            ng-click="TopicCtrl.topicDataStopQuery('Stoped By User')">
            Stop Query
        </button>
    </div>
    <div class="col-lg-8 col-md-8 col-sm-8 xs-8 mr10"
        permission="[lensesCtrl.roles.admin]">
        <div class="pull-right mr10">
            <span><b>Data Protection</b></span>
            <label class="switch">
                <input type="checkbox" ng-model="TopicCtrl.dataProtection"
                    ng-change="changeDataProtection()">
                <span class="slider round"></span>
            </label>
        </div>
    </div>
</div>

CSS-код для переключения: 

.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 24px;
  margin:6px 0 0;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

Насколько я понимаю, я не делаю здесь ничего плохого. Я просто хочу выровнять мой переключатель и диапазон, которые находятся на том же самом div с кнопками. Пролет выровнен идеально. Переключатель, с другой стороны, нет. Пожалуйста, помогите ..

1 Ответ

0 голосов
/ 29 октября 2018

Когда я посмотрел на ваш код, я увидел, что вы используете класс xs-8 вместо col-xs-8. Я попробовал это, и это работает. Надеюсь, что это тот ответ, который вы ищете:

https://jsfiddle.net/gvkhx0L8/

...