Question

我有以下标记：

.custom-switch {
  padding-left: 0;
}

.custom-switch .custom-control-label {
  left: 0;
  padding-left: 2.5rem;
}

.custom-switch .custom-control-label::before {
  top: 0.125rem;
  left: 0;
  width: 2rem;
  height: 1.25rem;
  border-radius: 1rem;
  transition: background-color .15s ease-out;
  background-color: #fff;
}

.custom-switch .custom-control-label::after {
  top: 0.3125rem;
  left: .25rem;
  width: .875rem;
  height: .875rem;
  -webkit-transform: none;
  transform: none;
  background-color: #fff;
  border-radius: 1rem;
  background-color: #adb5bd;
}

.custom-switch .custom-control-input:checked~.custom-control-label::after {
  background-color: #fff;
  -webkit-transform: translateX(0.625rem);
  transform: translateX(0.625rem);
  box-shadow: -0.125rem 0 0.125rem rgba(0, 0, 0, 0.2);
}

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="example-switch-custom4" name="example-switch-custom">
  <label class="custom-control-label" for="example-switch-custom">Test</label>
</div>

标签现在位于右侧，如此处https://i.stack.imgur.com/Z5hWp.jpg所示，是否有一种简单的方法可以将标签向左侧移动？谢谢！

Answer 1

您必须以left和padding的间距来玩游戏。

在下面的代码段中查看所需结果。

.custom-switch {
  padding-left: 0;
}

.custom-switch .custom-control-label {
  left: 0;
  padding-left: 2.5rem;
}

.custom-switch .custom-control-label::before {
  top: 0.125rem;
  left: 0;
  width: 2rem;
  height: 1.25rem;
  border-radius: 1rem;
  transition: background-color .15s ease-out;
  background-color: #fff;
}

.custom-switch .custom-control-label::after {
  top: 0.3125rem;
  left: .25rem;
  width: .875rem;
  height: .875rem;
  -webkit-transform: none;
  transform: none;
  background-color: #fff;
  border-radius: 1rem;
  background-color: #adb5bd;
}

.custom-switch .custom-control-input:checked~.custom-control-label::after {
  background-color: #fff;
  -webkit-transform: translateX(0.625rem);
  transform: translateX(0.625rem);
  box-shadow: -0.125rem 0 0.125rem rgba(0, 0, 0, 0.2);
}

.custom-switch.left {
  padding-left: 0 !important;
}

.custom-switch.left .custom-control-label {
  left: 0;
  padding-left: 0;
}

.custom-switch.left .custom-control-label::before {
  left: 2.25rem !important;
}

.custom-switch.left .custom-control-label::after {
  left: calc(2.25rem + 2px) !important;
}

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<div class="custom-control custom-switch">
  <label class="custom-control-label" for="example-switch-custom">Test</label>
  <input type="checkbox" class="custom-control-input" id="example-switch-custom4" name="example-switch-custom">

</div>

<div class="custom-control custom-switch left">
  <label class="custom-control-label" for="example-switch-custom">Test</label>
  <input type="checkbox" class="custom-control-input" id="example-switch-custom4" name="example-switch-custom">

</div>

Answer 2

我觉得你可以这样

Code |  ID  |  Type   |  TypeValue
----------------------------------
ABC  | 1234 | 'Type1' |  ';kjap' 
ABC  | 1234 | 'Type2' |  ')&jaa'
CDE  | 2345 | 'Type1' |   NULL
CDE  | 2345 | 'Type3' |  'asdfa'
EFG  | 3456 | 'Type2' |  'jmblk'

<div class="form-group">
            <label class="" for="sw">Is extra block</label>
             <div class="custom-control custom-switch d-inline" id="sw">
                <input type="checkbox" class="custom-control-input" id="edit_extra_block" name="extra_block" value="">
                <label class="custom-control-label" for="edit_extra_block"></label>
             </div>
        </div>

将开关标签对准左侧-Bootstrap 4

2 个答案: