Question

我正在使用Bootstrap Toggle插件，我希望Toggles的屏幕分辨率不同。

使用data-height属性设置Toggle的高度。有没有办法通过CSS更改数据高度？

<input id="btn-toggle" type="checkbox" data-toggle="toggle" data-width="100%" data-height="75" data-on="On Label" data-off="Off Label" data-style="stylename">

<style>
    .stylename .toggle-group {
        transition: left 0.1s;
        -webkit-transition: left 0.1s;
    }
</style>

将高度属性添加到.stylename或.stylename .toggle-group不起作用。

Answer 1

难以理解，请尝试将此添加到您的CSS中。我在“输入.stylename数据高度”中使用了相同的类remove the 75 from the，并尝试调整窗口大小。

@media(max-width:768px) {
.stylename {
    height:25px;
}      
}  

@media(min-width:768px) and (max-width:992px) {
.stylename{
    height:45px;
}      
}     
@media(min-width:992px) and (max-width:1200px) {
.stylename{
    height:55px;
}      
}    
@media(min-width:1200px) {
.stylename{
    height:75px;
}  
}

已添加到此帖子中。

Here is a full size Fiddle代码正在执行您想要的操作...根据不同的屏幕大小调整高度。

抓住边缘并调整窗口大小以查看切换更改高度大小。

Answer 2

我找到了一种通过CSS设置切换高度的方法;但似乎还必须将Toggle Label从上到下居中。

div .toggle {
    height: 100px !important;
}

div .toggle label {
    padding-top: 30px;
}

编辑：在调整大小时，padding-top属性似乎被忽略（它最初只有正确的填充）

使用Bootstrap Toggle插件实现自适应数据高度

2 个答案: