0

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

关联：

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

结果：

在此处输入图像描述

更新：

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

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

我还添加了与弹出框相关的代码，以便让你们更清楚地看到。

4

2 回答 2

0

使用引导程序 2.x 的“输入附加”功能。不需要那样使用'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">
    <!-- 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-31T08:30:49.860 回答
0

使用这个链接它对你很重要

$("[data-toggle=popover]").popover({
 html: true, 
content: function() {
      return $('#popover-content').html();
    }
});
于 2013-10-31T08:02:24.147 回答