簡單的開/關切換器位置在與文本相同的線

Question

我想在bootstrap中的同一行上使文本+按鈕，但不起作用。它只是不想移動。

這是我迄今爲止

.onoffswitch { 
 
    position: relative; width: 90px; 
 
    -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: 20px; 
 
} 
 
.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: 30px; padding: 0; line-height: 30px; 
 
    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; 
 
    box-sizing: border-box; 
 
} 
 
.onoffswitch-inner:before { 
 
    content: "ON"; 
 
    padding-left: 10px; 
 
    background-color: #34A7C1; color: #FFFFFF; 
 
} 
 
.onoffswitch-inner:after { 
 
    content: "OFF"; 
 
    padding-right: 10px; 
 
    background-color: #EEEEEE; color: #999999; 
 
    text-align: right; 
 
} 
 
.onoffswitch-switch { 
 
    display: block; width: 18px; margin: 6px; 
 
    background: #FFFFFF; 
 
    position: absolute; top: 0; bottom: 0; 
 
    right: 56px; 
 
    border: 2px solid #999999; border-radius: 20px; 
 
    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; 
 
}

<div class="form-group"> 
 
    <div class="col-md-12"> 
 
    <div class="col-md-8"> Switch mode from here: </div> 
 
    
 
    <div class="col-md-4"> 
 
     <div class="onoffswitch"> 
 
     <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked> 
 
     <label class="onoffswitch-label" for="myonoffswitch"> 
 
      <span class="onoffswitch-inner"></span> 
 
      <span class="onoffswitch-switch"></span> 
 
     </label> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 
</div>

我想這ON/OFF開關旁邊上去Switch mode from here:。我已經打了col-*，rows等。

Answer 1

我已在你的div一些直接的變化。

您可以根據需要進行更改。

.onoffswitch { 
 
    position: relative; width: 90px; 
 
    -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: 20px; 
 
} 
 
.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: 30px; padding: 0; line-height: 30px; 
 
    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; 
 
    box-sizing: border-box; 
 
} 
 
.onoffswitch-inner:before { 
 
    content: "ON"; 
 
    padding-left: 10px; 
 
    background-color: #34A7C1; color: #FFFFFF; 
 
} 
 
.onoffswitch-inner:after { 
 
    content: "OFF"; 
 
    padding-right: 10px; 
 
    background-color: #EEEEEE; color: #999999; 
 
    text-align: right; 
 
} 
 
.onoffswitch-switch { 
 
    display: block; width: 18px; margin: 6px; 
 
    background: #FFFFFF; 
 
    position: absolute; top: 0; bottom: 0; 
 
    right: 56px; 
 
    border: 2px solid #999999; border-radius: 20px; 
 
    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; 
 
}

<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="form-group"> 
 
    <div class="col-md-12 col-xs-12"> 
 
    <div class="col-md-8 col-xs-5" style="text-alignment:center;margin-top:6px;"> Switch mode from here: </div> 
 
    
 
    <div class="col-md-4 col-xs-2 " style="text-alignment:left;margin-left:-50px;"> 
 
     <div class="onoffswitch"> 
 
     <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked> 
 
     <label class="onoffswitch-label" for="myonoffswitch"> 
 
      <span class="onoffswitch-inner"></span> 
 
      <span class="onoffswitch-switch"></span> 
 
     </label> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 
</div>

Answer 2

用於col-xs-*爲小圖：

.onoffswitch { 
 
    position: relative; width: 90px; 
 
    -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: 20px; 
 
} 
 
.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: 30px; padding: 0; line-height: 30px; 
 
    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; 
 
    box-sizing: border-box; 
 
} 
 
.onoffswitch-inner:before { 
 
    content: "ON"; 
 
    padding-left: 10px; 
 
    background-color: #34A7C1; color: #FFFFFF; 
 
} 
 
.onoffswitch-inner:after { 
 
    content: "OFF"; 
 
    padding-right: 10px; 
 
    background-color: #EEEEEE; color: #999999; 
 
    text-align: right; 
 
} 
 
.onoffswitch-switch { 
 
    display: block; width: 18px; margin: 6px; 
 
    background: #FFFFFF; 
 
    position: absolute; top: 0; bottom: 0; 
 
    right: 56px; 
 
    border: 2px solid #999999; border-radius: 20px; 
 
    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; 
 
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="form-group"> 
 
    <div class="col-md-12"> 
 
    <div class="col-xs-4 col-md-4"> Switch mode from here: </div> 
 
    
 
    <div class="col-xs-4 col-md-4"> 
 
     <div class="onoffswitch"> 
 
     <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked> 
 
     <label class="onoffswitch-label" for="myonoffswitch"> 
 
      <span class="onoffswitch-inner"></span> 
 
      <span class="onoffswitch-switch"></span> 
 
     </label> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 
</div>

Answer 3

確認，也爲所有的大屏幕尺寸的增加自舉列類。

.onoffswitch { 
 
    position: relative; 
 
    width: 90px; 
 
    -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: 20px; 
 
} 
 
.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: 30px; 
 
    padding: 0; 
 
    line-height: 30px; 
 
    font-size: 14px; 
 
    color: white; 
 
    font-family: Trebuchet, Arial, sans-serif; 
 
    font-weight: bold; 
 
    box-sizing: border-box; 
 
} 
 
.onoffswitch-inner:before { 
 
    content: "ON"; 
 
    padding-left: 10px; 
 
    background-color: #34A7C1; 
 
    color: #FFFFFF; 
 
} 
 
.onoffswitch-inner:after { 
 
    content: "OFF"; 
 
    padding-right: 10px; 
 
    background-color: #EEEEEE; 
 
    color: #999999; 
 
    text-align: right; 
 
} 
 
.onoffswitch-switch { 
 
    display: block; 
 
    width: 18px; 
 
    margin: 6px; 
 
    background: #FFFFFF; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    right: 56px; 
 
    border: 2px solid #999999; 
 
    border-radius: 20px; 
 
    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; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="form-group"> 
 
    <div class="col-md-12 col-lg-12 col-xs-12"> 
 
    <div class="col-md-8 col-lg-8 col-xs-8">Switch mode from here:</div> 
 
    <div class="col-md-4 col-lg-4 col-xs-4"> 
 
     <div class="onoffswitch"> 
 
     <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked> 
 
     <label class="onoffswitch-label" for="myonoffswitch"> 
 
      <span class="onoffswitch-inner"></span> 
 
      <span class="onoffswitch-switch"></span> 
 
     </label> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>