html - Bootstrap 列中的垂直对齐项

Question

希望是一个容易解决的问题。见下图，我无法让拨动开关与引导按钮水平对齐。我怀疑这可能与此自定义切换开关的 css 有关。我在 Razor 页面上的代码中尝试的任何内容都没有任何影响。谢谢

Razor 页面代码:

 <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

您可以将 bootstrap 4 中的这两个类添加到切换中

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

您可以在 documentaion 中查看更多相关信息

之后从

编辑你的 .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;
}