Question

我正在处理一个小项目 - here is it，我有两个问题。

在使用切换滑动按钮进行游戏时，您会看到他们正在失去位置，圆点会在其边界移动时停留在它的位置。这是由我猜的文字造成的。

按钮工作正常，没有数据表。

这是我的css：

    .cmn-toggle {
    position: absolute;
    margin-left: -9999px;
    visibility: hidden;
}
.cmn-toggle + label {
    display: block;
    position: relative;
    cursor: pointer;
    outline: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* ============================================================
  SWITCH 2 - ROUND FLAT
============================================================ */
input.cmn-toggle-round-flat + label {
    padding: 2px;
    width: 50px;
    height: 29px;
    background-color: #f1f1f1;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    -ms-border-radius: 60px;
    -o-border-radius: 60px;
    border-radius: 30px;
    -webkit-transition: background 0.4s;
    -moz-transition: background 0.4s;
    -o-transition: background 0.4s;
    transition: background 0.4s;
}
input.cmn-toggle-round-flat + label:before, input.cmn-toggle-round-flat + label:after {
    display: block;
    position: absolute;
    content: "";
}
input.cmn-toggle-round-flat + label:before {
    top: 2px;
    left: 2px;
    bottom: 2px;
    right: 2px;
    background-color: #fff;

    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    -ms-border-radius: 60px;
    -o-border-radius: 60px;
    border-radius: 30px;
    -webkit-transition: background 0.4s;
    -moz-transition: background 0.4s;
    -o-transition: background 0.4s;
    transition: background 0.4s;
}
input.cmn-toggle-round-flat + label:after {
    top: 4px;
    left: 4px;
    bottom: 4px;
    width: 20px;
    background-color: #dd0012;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius:10px;
    border-radius: 30px;
    -webkit-transition: margin 0.4s, background 0.4s;
    -moz-transition: margin 0.4s, background 0.4s;
    -o-transition: margin 0.4s, background 0.4s;
    transition: margin 0.2s, background 0.4s;
}
input.cmn-toggle-round-flat:checked + label {
    background-color: #f1f1f1;
}
input.cmn-toggle-round-flat:checked + label:after {
    margin-left: 21px;
    background-color: #00e114;
}

.op_name{
  display:inline-flex;
}

.switch{
  display:inline-flex;
}
#example > tbody > tr > td {
    white-space: nowrap;
}

点击“编辑”按钮时，会显示模式但内容 - 所有数据都会显示延迟.... iv＆＃39; e尝试删除＆＃34;淡入淡出＆＃34;从模型中分类 - 并解决问题 - 但如果我不知道什么会失去褪色效果呢？

Answer 1

通过添加

解决了第一个问题

`.toggle_btn{
   display: inline-flex;
  }

 .switch{
   margin-left: 85px;
  }
 .op_name{
  position: absolute;
  margin-left: 15px;
  margin-top: 7px;
 }
  `

Answer 2

问题2.您可以尝试类似：

$(document).ready(function(){
    $("#myBtn").click(function(){
        // reference p into modal-body. Here you load all the data
        $("#content").html("The content") 
        $("#myModal").modal(); // finally open the modal
    });
});

或许你可以使用模态食物修复它。这里的文档：http://getbootstrap.com/javascript/#modals-events

希望我帮助过你。

在数据表中切换滑动按钮丢失的位置

2 个答案: