使用引導程序時的按鈕間距和邊距3

我正在使用引導程序和jquery在django模板中創建模態對話框。對話框被創建如下：使用引導程序時的按鈕間距和邊距3

<div id="dialog" class="modal" title="Edit" style="display:none"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
        <span aria-hidden="true">&times;</span></button> 
       <h4 class="modal-title">Review Uploaded Image</h4> 
       </div> 
       <div class="modal-body"></div> 
       <a href="#" class="btn btn-primary" id="test-event">Test</a> 
       <a href="#" class="btn btn-primary" id="test-event2">Test2</a> 
       <div class="modal-footer"> 
       <a href="#" class="btn btn-success" id="save-event">Save</a> 
       </div> 
      </div> 
     </div> 
    </div>

這就產生了一個對話框，其看起來如下圖像（該對話框體被填充於一個事件）

的問題是，這兩個test按鈕被成束在一起，我想讓按鈕距離對話邊緣幾個像素，並增加它們之間的間距。有沒有可能在HTMl本身做到這一點，而無需修改CSS？第二，我認爲如下所示在對話框頁腳中移動這些按鈕，但它改變了對話框以非常意想不到的方式顯示的方式。我喜歡的按鈕頁腳爲：

<div class="modal-footer"> 
      <a href="#" class="btn btn-primary" id="test-event">Test</a> 
      <a href="#" class="btn btn-primary" id="test-event2">Test2</a> 
      <a href="#" class="btn btn-success" id="save-event">Save</a> 

</div>

然而，這使得對話框如下爲：

正如你所看到的頁腳分隔已經消失，一切都已經下了剛搬到由於某種原因其餘的表單元素。

function EditDialog(pk) { 
     sessionStorage.setItem("pk", pk.toString()); 
     $.ajax({ 
      url: "{% url 'populatereviewform' %}", 
      method: 'GET', 
      data: { 
      pk: pk 
     }, 
     success: function(formHtml){ 
      //place the populated form HTML in the modal body 
      $("#dialog").modal({width: 500, height: 500}); 
      $('.modal-body').html(formHtml); 
      $('#dialog').on('hidden.bs.modal', function() { 
       window.location.reload(); 
      }) 
     }, 
     dataType: 'html' 
     }); 

     return false; 
    }

所以，我覺得我是個將它添加到正確的位置在$('.modal-body').html(formHtml);

來源

2017-03-22 Luca

看起來很好，當我把它放入一個片段：http://www.bootply.com/oapRb5DCWG –

@RachelS呵呵....好吧，我會做更多的測試和報告。也許是因爲對話框體後來被填充，它有這個問題... – Luca

也許發佈整個模態的html？ –

將HTML插入模式：

編輯

的HTML中的插入爲已完成不應該是一個問題，但請仔細檢查您是否插入了正確的部分。它看起來像內容插入到頁腳而不是正文。您可能會考慮爲模態主體部分提供一個ID，以便您可以更輕鬆地引用它。

來源

2017-03-22 15:40:11 lb505

通過編輯更新了問題以顯示如何插入問題。似乎沒關係，我認爲... – Luca

我們能否看到構建「formHtml」的代碼？插入正文內容的JavaScript看起來很好。 http://www.bootply.com/mca80npYIk – lb505

使用引導程序時的按鈕間距和邊距3

回答

相關問題