html - 响应式引导定位

Question

我有一个表格，里面有一个自定义复选框。

复选框有一个标签，但标签不在复选框的垂直中心。

如何使用复选框使标签垂直居中？

在这里我添加了代码来测试它：https ://jsfiddle.net/totalist/u40vz8o1/2/

我还在下面添加了一部分以便更好地理解

HTML 代码：

        <form>
          </div>
          <div class="form-group">
            <label for="status" class="col-form-label">Status:</label>
            <label class="switch">
               <input type="checkbox" class="form-control" name="status">
               <span class="slider round"></span>
            </label>
          </div>
        </form>

CSS 代码：

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.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: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked+.slider {
    background-color: #2196F3;
}

input:focus+.slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

标签： htmlcssbootstrap-4

Answer 1

只需将 BS 类添加d-flex到div包含状态的您的：

<div class="form-group d-flex">

switch然后你可以通过添加my-automargin-top 和 -bottom auto来更加专注于课堂：

<label class="switch my-auto">

演示：

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.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: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked+.slider {
    background-color: #2196F3;
}

input:focus+.slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

   <div class="modal-dialog" role="document">
      <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">New message</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group" style="display:none;">
            <label for="name" class="col-form-label">Id:</label>
            <input type="text" class="form-control edit-item-id" required name="id" placeholder="id">
          </div>
          <div class="form-group">
            <label for="name" class="col-form-label">Name:</label>
            <input type="text" class="form-control" required name="name">
          </div>
          <div class="form-group">
            <label for="lastname" class="col-form-label">Lastname:</label>
            <input type="text" class="form-control" required name="lastname">
          </div>
          <div class="form-group d-flex">
            <label for="status" class="col-form-label">Status:</label>
            <label class="switch my-auto ml-3">
               <input type="checkbox" class="form-control" name="status">
               <span class="slider round"></span>
            </label>
          </div>
          <div class="form-group">
            <label for="role" class="col-form-label">Role:</label>
            <select class="form-control" name="role">
               <option>admin</option>
               <option>user</option>
            </select>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary btn-modal-add-edit" data-dismiss="modal">Send message</button>
      </div>
   </div>
</div>