Bootstrap 3.3.6对齐

时间:2016-02-25 14:39:41

标签: css twitter-bootstrap

直到现在我使用的是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的外部资源 任何人都知道为什么会发生这种情况,我该如何解决?

2 个答案:

答案 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>