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/