Question

希望很容易解决。参见下图，我无法使拨动开关与自举程序按钮水平对齐。我怀疑这可能与此自定义切换开关的CSS有关。我在剃须刀页面上的代码中尝试过的所有操作都没有任何影响。

剃刀页面代码：

 <div class="container" style="margin-top: 2em">
<div class="row align-items-center">
    <div class="col-sm">
        <div class="onoffswitch">
            <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch">
            <label class="onoffswitch-label" for="myonoffswitch">
                <span class="onoffswitch-inner"></span>
                <span class="onoffswitch-switch"></span>
            </label>
        </div>
    </div>
    <div class="col-sm">
        <button type="button" class="btn btn-secondary">
            Button
            <i class="fas fa-play"></i>
        </button>
    </div>
    <div class="col-sm">
        <button type="button" class="btn btn-secondary">
            Button
            <i class="fas fa-play"></i>
        </button>
    </div>
</div>

拨动开关的自定义CSS

.onoffswitch {
position: relative;
width: 70px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}

.onoffswitch-checkbox {
display: none;
}

.onoffswitch-label {
display: block;
overflow: hidden;
cursor: pointer;
border: 2px solid #999999;
border-radius: 0px;
}

.onoffswitch-inner {
display: block;
width: 200%;
margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}

.onoffswitch-inner:before, .onoffswitch-inner:after {
    display: block;
    float: left;
    width: 50%;
    height: 24px;
    padding: 0;
    line-height: 20px;
    font-size: 14px;
    color: white;
    font-family: Trebuchet, Arial, sans-serif;
    font-weight: bold;
    box-sizing: border-box;
    border: 2px solid transparent;
    background-clip: padding-box;
    }

.onoffswitch-inner:before {
    content: "ON";
    padding-left: 5px;
    background-color: #383B40;
    color: #FFFFFF;
}

.onoffswitch-inner:after {
    content: "OFF";
    padding-right: 5px;
    background-color: #383B40;
    color: #999999;
    text-align: right;
}

.onoffswitch-switch {
display: block;
width: 30px;
margin: 0px;
background: #FF0000;
position: absolute;
top: 0;
bottom: 0;
right: 40px;
transition: all 0.3s ease-in 0s;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
background-color: #00FF00;
}

Answer 1

您可以从引导程序4

中添加这两个类的切换选项

class="d-flex align-items-center"

您可以在documentaion

中查看更多信息

在此之后，从{p>编辑您的.onoffswitch-label

.onoffswitch-label {
display: block;
overflow: hidden;
cursor: pointer;
border: 2px solid #999999;
border-radius: 0px;
}

到

.onoffswitch-label {
display: block;
overflow: hidden;
cursor: pointer;
border: 2px solid #999999;
border-radius: 0px;
margin: 0;
}

Answer 2

您可以使用css hack，请看下面的代码

html:
<div id="parent">
  <div id="child">Content here</div>
</div>

css:
#parent {display: table}

#child {
  display: table-cell;
  vertical-align: middle;
 }

Bootstrap列中的垂直对齐项

2 个答案: