Question

如何在引导程序中弹出窗体内的表单？

链接：

<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

更新：

正如下面的评论所说，我认为它的大小为popover。我试图修改它，但似乎我缺少一些东西：

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

我还添加了与popover相关的代码，以便更清晰地了解你们。

Answer 1

使用此link它对您有帮助

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

Answer 2

使用bootstrap 2.x的'input-append'功能。不需要那样使用'form-inline'，只需'form'即可：

<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">  <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>

在bootstrap 2.x popover中形成

2 个答案: