在引導程序2.x彈出框內形成

鏈接：

<a href="#" id="popover"><i class="icon-plus-sign"></i> Tab</a>

JS：

$('#popover').popover({ 
    html : true, 
    title: function() { 
     return $("#popover-head").html(); 
    }, 
    content: function() { 
     return $("#popover-content").html(); 
    } 
});

HTML：

<div id="popover-head" class="hide">Add new tab</div> 
<div id="popover-content" class="hide"> 
    <form class="form-inline"> 
    <div class="form-group"> 
    <!-- my form --> 
     <input type="text" /> 
     <button class="btn btn-primary" type="submit" > 
     <i class="icon-white icon-ok"></i> 
     </button> 
     <button class="btn" type="button" /> 
     <i class="icon-remove"></i> 
     </button> 
    </div> 
    </form> 
</div>

結果：

enter image description here

UPDATE：

正如下面的評論說，我覺得它的對popover大小。我試圖修改它，但它似乎我少了點什麼：

.popover { 
    max-width: 150px; 
    width: auto; 
}

我還添加了相關的酥料餅更多更清晰的視野，以你們的代碼。

來源

2013-10-31 newbie

什麼是寬度你的彈出窗口？它是固定的嗎？我認爲，你的表單已經內聯，但彈出的寬度是推下來的 – doniyor

我沒有設置彈出的大小，所以我想它的默認大小 – newbie

檢查它，可能是固定的 – doniyor

hepfull使用引導2.x版本的 '輸入追加' functionallity 沒必要用 '形內聯' 這種方式，只是 '形式' 會做：

<form> 
    <div class="form-group"> 
     <div class="input-append"> 
     <input id="appendedInputButtons" type="text"> 
     <button class="btn" type="button"><i class="icon-ok"></i></button> 
     <button class="btn" type="button"><i class="icon-remove"></i></button> 
     </div> 
    </div> 
</form>

此處瞭解詳情：

http://getbootstrap.com/2.3.2/base-css.html#forms

編輯：

完整的例子代碼：

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Bootstrap 101 Template</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <!-- Bootstrap --> 
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> 
    <link href="css/bootstrap-responsive.css" rel="stylesheet"> 

    <style> 
     .popover { 
      max-width: 150px; 
      width: auto; 
     } 
    </style> 

    </head> 
    <body> 


    <div class="container-fluid"> 
     <div class="row-fluid"> 
     <br> 
     </div> 
     <div class="row-fluid"> 
     <div class="span3"> 

     </div> 

     <a href="#" id="popover"><i class="icon-plus-sign"></i> Tab</a> 

     <div id="popover-head" class="hide">Add new tab</div> 
      <div id="popover-content" class="hide"> 

      <form> 
      <div class="form-group"> 
       <div class="input-append"> 
        <input class="span6" id="appendedInputButtons" type="text"> 
        <button class="btn" type="button"><i class="icon-ok"></i></button> 
        <button class="btn" type="button"><i class="icon-remove"></i></button> 
       </div> 
      </div> 
      </form> 

      </div> 

     <div class="span3"> 

     </div> 
     </div> 
    </div> 



    <script src="http://code.jquery.com/jquery.js"></script> 
    <script src="js/bootstrap.min.js"></script> 

    <script> 
     $('#popover').popover({ 
     html : true, 
     title: function() { 
      return $("#popover-head").html(); 
     }, 
     content: function() { 
      return $("#popover-content").html(); 
     } 
    }); 
    </script> 
    </body> 
</html>

來源

2013-10-31 08:30:49 Andries

它不工作我認爲doniyor是正確的。其關於popover的大小 – newbie

奇怪..好吧，好的。你是否以像素爲單位設置了輸入的寬度？硬編碼？也許如果你使用百分比，就像'.input-append {width：100％}它可以工作。無論如何，form-inline是我注意到的一個小錯誤，所以我實際上並不喜歡使用它。 – Andries

它確實在文本中追加了按鈕，但文本框+ 2按鈕的大小超出了彈出窗口的長度。我想調整popover的大小，但不能解決問題。我更新了我的帖子，爲您更清晰地查看。 – newbie

使用這種link它爲你

$("[data-toggle=popover]").popover({ 
html: true, 
content: function() { 
     return $('#popover-content').html(); 
    } 
});

來源

2013-10-31 08:02:24 John

我已經看到那篇文章。它使用bootstrap 3.這就是爲什麼我再次問。 – newbie

在引導程序2.x彈出框內形成

回答

相關問題