Bootstrap modal将我的jumbotron推向左侧但不在边缘？

Question

我尝试了一些其他问题的方式给自举模态，但我使用bootstrap 3.3.7这不应该是问题，但我不知道为什么每当我点击按钮时发生这种情况我的jumbotron缩小！ ！任何帮助，将不胜感激。

我的html代码：

<div class="jumbotron"> 
    <div id="post"></div> 
    <div id="erase" type="submit" data-toggle="modal" data-target="#myModal1" onclick="erase()"> 
     <button class="btn btn-default btn-lg" style="border-radius:100%;width:80px;height:80px;padding:15px"> 
     <img src="/uploads/text.png" style="height:40px;width:40px" /> 
     </button> 
    </div> 
</div> 

我的JavaScript函数：

function erase(){ 
    $('#post').empty(); 

    $('#post').html('<div class="modal fade" id="myModal1" role="dialog">'+'<div class="modal-dialog">'+'<div class="modal-content">'+ 
      '<div class="modal-header">'+'<button type="button" class="close" data-dismiss="modal">&times;</button>'+ 
      '<h4 class="modal-title" style="font-family:Pangolin">Post your text</h4>'+' </div>'+'<div class="modal-body">'+ 
      '<div class="media "><div class="media-left"> <form action="porthome_.php" method="post" id="usrform" >'+ 

      '<div class="form-group"><strong><span class="glyphicon glyphicon-pencil" style="font-size:13px" ></span> Write your post:</strong> <input form="usrform" id="textarea1" type="text" class="form-control" name="image" placeholder="Write something" data-toggle="tooltip" data-placement="top" title="Add the image link from any site,if in doubt check out our videos on how to upload images in post.">'+ 
      '</div>'+ 
      '<div class="text-right">'+ 
      '<button type="submit" id="sub"class="btn btn-primary">POST</button>'+ 
      '</div>'+ 
      '</form><div class="media-body"> <a href="#"><h5 class="media-heading" style="color:#3369e8"></h5></a>'+ 
      '</div>'+ 
      '</div>'+ 
      '</div>'+'<div class="modal-footer">'+ 
      '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>'+'</div>'+ 
      '</div>'+'</div>'+'</div>'); 
     } 

Answer 1

在这里，你去了一个解决方案https://jsfiddle.net/qc9dgefg/2/

erase = function(){ 
 
    $('#post').empty(); 
 

 
    $('#post').html(
 
    \t `<div class="modal fade" id="myModal1" role="dialog"> 
 
\t \t \t <div class="modal-dialog"> 
 
     <div class="modal-content"> 
 
      <div class="modal-header"> 
 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
      <h4 class="modal-title" style="font-family:Pangolin">Post your text</h4> 
 
      </div> 
 
      <div class="modal-body"> 
 
      <div class="media"> 
 
       <div class="media-left"> 
 
       <form action="porthome_.php" method="post" id="usrform" > 
 
        <div class="form-group"> 
 
        <strong> 
 
         <span class="glyphicon glyphicon-pencil" style="font-size:13px" ></span> 
 
         Write your post: 
 
        </strong> 
 
        <input form="usrform" id="textarea1" type="text" class="form-control" name="image" placeholder="Write something" data-toggle="tooltip" data-placement="top" title="Add the image link from any site,if in doubt check out our videos on how to upload images in post."> 
 
        </div> 
 
        <div class="text-right"> 
 
        <button type="submit" id="sub"class="btn btn-primary">POST</button> 
 
        </div> 
 
       </form> 
 
       <div class="media-body"> 
 
        <a href="#"><h5 class="media-heading" style="color:#3369e8"></h5></a> 
 
       </div> 
 
       </div> 
 
      </div> 
 
\t \t \t \t \t </div> 
 
     \t <div class="modal-footer"> 
 
     \t \t <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div>`); 
 
     }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="container"> 
 
    <div class="jumbotron"> 
 
    <div id="post"></div> 
 
    <div id="erase" type="submit" data-toggle="modal" data-target="#myModal1" onclick="erase()"> 
 
     <button class="btn btn-default btn-lg" style="border-radius:100%;width:80px;height:80px;padding:15px"> 
 
     <img src="http://via.placeholder.com/350x150" style="height:40px;width:40px"> 
 
     </button> 
 
    </div> 
 
    </div> 
 
</div>

您是失踪其中一个收盘格标签。

我已经与我也在JavaScript格式化动态HTML一起加入结束的div标签。