Question

我需要使用引导程序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上的切换和跨度与按钮对齐。跨度完美对齐。另一方面，切换没有。请帮忙。

Answer 1

查看您的代码时，我看到您使用类xs-8而不是col-xs-8。我尝试了这个，这有效。希望这是您寻找的答案：

https://jsfiddle.net/gvkhx0L8/

Bootstrap 3行切换与行不对齐

1 个答案: