如何从右侧打开Bootstrap模式？

问题描述：

我想使Bootstrap模式获得完整的窗口高度并像右侧栏那样从右侧打开它？这意味着它应该对齐。如何从右侧打开Bootstrap模式？

我该如何做到这一点？

可能会有所帮助:) https://codepen.io/bootpen/pen/jbbaRa –

答

这是一种方式（灵感来自于这个Fiddle），通过添加一个CSS类right模式显示它从右侧。

.modal.fade:not(.in).right .modal-dialog { 
 
    -webkit-transform: translate3d(25%, 0, 0); 
 
    transform: translate3d(25%, 0, 0); 
 
}

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 

 
<div id="myModal" class="modal fade right"> 
 
    <div class="modal-dialog"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal">&times;<span class="sr-only">Close</span></button> 
 
     <h4 class="modal-title">Modal title</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <p>Modal body</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<a class="btn btn-primary" data-toggle="modal" data-target="#myModal">Open modal from the right</a>

我想将其设置为右对齐，就像我们边栏？我问过了！ –

如何从右侧打开Bootstrap模式？

相关推荐