回发后引导开关高度自动更改答案

【问题标题】：Bootstrap switch height automatically changes after postback回发后引导开关高度自动更改
【发布时间】：2019-08-02 14:22:31
【问题描述】：

我有引导开关控件，可以打开和关闭 asp.net 项目中的某些面板。我的代码如下：

<div class="bootstrap-switch-container" id="div_pin_bscont" style="height: 34px!important">
    <span class="bootstrap-switch-handle-on bootstrap-switch-primary"></span>
    <span class="bootstrap-switch-label">&nbsp;</span>
    <span class="bootstrap-switch-handle-off bootstrap-switch-info"></span>
    <input type="checkbox" class="make-switch" data-on-color="primary" data-off-color="info" id="chx_pin_data" data-size="mini">
 </div>

构建后，我的标记代码如下所示：

<div class="bootstrap-switch-container" id="div_pin_bscont" style="height: 34px!important">
    <span class="bootstrap-switch-handle-on bootstrap-switch-primary"></span>
    <span class="bootstrap-switch-label">&nbsp;</span>
    <span class="bootstrap-switch-handle-off bootstrap-switch-info"></span>
    <div class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-mini bootstrap-switch-id-chx_pin_data bootstrap-switch-off bootstrap-switch-animate" style="width: 64px;"><div class="bootstrap-switch-container" style="width: 93px; margin-left: -31px;"><span class="bootstrap-switch-handle-on bootstrap-switch-primary" style="width: 31px;">ON</span><span class="bootstrap-switch-label" style="width: 31px;">&nbsp;</span><span class="bootstrap-switch-handle-off bootstrap-switch-info" style="width: 31px;">OFF</span><input type="checkbox" class="make-switch" data-on-color="primary" data-off-color="info" id="chx_pin_data" data-size="mini"></div></div>
 </div>

但是在回发之后，这个控件的高度会自动增加。

我试图通过标记或代码访问控件，但高度由构建添加的元素控制。我也挖掘了css文件，但没有出现。

感谢您的帮助。

【问题讨论】：

通过网络工具（F12）检查元素，它会告诉你设置高度的原因。

标签： c# css asp.net bootstrap-switch

【解决方案1】：

这听起来很奇怪一种解决方案应该是在您的 CSS 中为该元素定义一个静态高度，例如

div.bootstrap-switch-container {
    height: 25px;
}
.bootstrap-switch .bootstrap-switch-handle-on, .bootstrap-switch .bootstrap-switch-handle-off, .bootstrap-switch .bootstrap-switch-label  {
    padding: 3px 12px;
}
div.bootstrap-switch {
    margin-top: -4px;
}

如本文所述 height issue in bootstrap switch, 您也可以在浏览器中检查元素并停用类，然后当您确定是哪个制作它时，您可以在您的 css 文件中搜索该类

【讨论】：