css - Bootstrap 3行切换不与行对齐

Question

我需要使用 bootstrap 3 在一行内水平对齐切换。我已经尝试了所有方法。从 flexbox、bootstrap 类和强制内联样式，但这件事似乎并不在意。

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 上的切换和跨度与按钮对齐。跨度完美对齐。另一方面，切换没有。请帮助..

Answer 1

当我查看您的代码时，我看到您使用类 xs-8 而不是 col-xs-8。我试过了，这很管用。希望这是您正在寻找的答案:

https://jsfiddle.net/gvkhx0L8/