直到现在我使用的是Bootstrap 3.3.1,一切都很好。
http://jsfiddle.net/PKrUC/256/
然后我必须将Bootstrap更新到最新版本3.3.6:
http://jsfiddle.net/PKrUC/257/
按钮错误。 align="right"
似乎不再适用了。
我使用https://cdnjs.com/libraries/twitter-bootstrap/3.3.6中的文件作为jsfiddle的外部资源
任何人都知道为什么会发生这种情况,我该如何解决?
答案 0 :(得分:1)
您可以在各个按钮类
中使用“向右拉”<html>
<head>
<title>Site Map</title>
<style type="text/css">
.dragme {
position:relative;
cursor: move;
}
</style>
<script type="text/javascript">
function startDrag(e) {
// determine event object
if (!e) {
var e = window.event;
}
// IE uses srcElement, others use target
var targ = e.target ? e.target : e.srcElement;
//alert(targ.height);
maxsizeX = targ.width;
maxsizeY = targ.height;
//alert(maxsizeX + " " + maxsizeY);
if (targ.className != 'dragme') {return};
// calculate event X, Y coordinates
offsetX = e.clientX;
offsetY = e.clientY;
// assign default values for top and left properties
if(!targ.style.left) { targ.style.left='0px'};
if (!targ.style.top) { targ.style.top='0px'};
// calculate integer values for top and left
// properties
coordX = parseInt(targ.style.left);
coordY = parseInt(targ.style.top);
drag = true;
// move div element
document.onmousemove=dragDiv;
}
function dragDiv(e) {
if (!drag) {return};
if (!e) { var e= window.event};
var img = "SiteMap.png";
var targ=e.target?e.target:e.srcElement;
// move div element
if (coordX+e.clientX-offsetX < 0 && coordX+e.clientX-offsetX > -maxsizeX+500){
targ.style.left=coordX+e.clientX-offsetX+'px';
}
if (coordY+e.clientY-offsetY< 0 && coordY+e.clientY-offsetY > -maxsizeY+500){
targ.style.top=coordY+e.clientY-offsetY+'px';
}
return false;
}
function stopDrag() {
drag=false;
}
window.onload = function() {
document.onmousedown = startDrag;
document.onmouseup = stopDrag;
}
</script>
</head>
<body>
<img src="SiteMap.png" border=0 usemap="#TruView" id="draggable" class="dragme">
<map name="TruView">
<area title="P96N-P-1" shape="circle" coords="808,476,8" href="P96N-P-1/TruView.xml">
<area title="P96N-P-2" shape="circle" coords="874,882,8" href="P96N-P-2/TruView.xml">
<area title="P96N-P-3" shape="circle" coords="924,1424,8" href="P96N-P-3/TruView.xml">
<area title="P96N-P-4" shape="circle" coords="978,1781,8" href="P96N-P-4/TruView.xml">
<area title="P604-P-1" shape="circle" coords="947,2140,8" href="P604-P-1/TruView.xml">
...
</map>
</body>
</html>
答案 1 :(得分:0)
您只需将.text-right
添加到父元素
修复:http://jsfiddle.net/eycfyvx9/
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="col-md-4 col-md-offset-4">
<form class="form-horizontal" method="POST" id="packet_form">
<div class="panel panel-info">
<div class="panel-heading">
<div class="row">
<div class="col-xs-12">
<h4 class="pull-left">New Packet</h4>
</div>
</div>
</div>
<div class="panel-body" id="panel_user">
<div class="form-group">
<label class="col-xs-3 control-label" for="date">Expire-Date</label>
<div class="col-xs-6">
<input type="date" id="date" name="date" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label" for="licence_text">Lizence:</label>
<div class="col-xs-9">
<textarea class="form-control" id="licence_text" name="licence_text" rows="20"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-xs-12 text-right">
<a class="btn btn-danger" href="javascript:window.history.back()">Back</a>
<button type="submit" class="btn btn-success" formaction="add_packet.php">Save</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>