在bootstrap 2.x内部弹出窗口中形成

Question

How can I inline the form inside a pop over in bootstrap? 如何在引导程序的弹出窗口中内联表单？

Link: 链接：

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

JS: JS：

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

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>

Result: 结果：

在此处输入图片说明

UPDATE: 更新：

As the comment below say, I think its about the popover size. 正如下面的评论所说，我认为它与popover大小有关。 I tried to modify it but it seems I'm lacking something: 我尝试对其进行修改，但似乎缺少以下内容：

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

I also added the codes related to the popover for more clearer view to you guys. 我还添加了与弹出框相关的代码，以使你们更加清晰地查看。

Answer 1

use this link its hepfull for you 使用此链接为您服务

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

Answer 2

Use the 'input-append' functionallity of bootstrap 2.x. 使用引导程序2.x的“输入-附加”功能。 No need to use 'form-inline' that way, just 'form' will do: 无需那样使用“表单内联”，只需“表单”即可：

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

More info here: 更多信息在这里：

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

EDIT: 编辑：

full example code: 完整的示例代码：

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

在bootstrap 2.x内部弹出窗口中形成

问题描述

2 个解决方案

解决方案1
0 2013-10-31 08:02:24

解决方案2
0 已采纳 2013-10-31 08:30:49

在bootstrap 2.x内部弹出窗口中形成

问题描述

2 个解决方案

解决方案1 0 2013-10-31 08:02:24

解决方案2 0 已采纳 2013-10-31 08:30:49

解决方案1
0 2013-10-31 08:02:24

解决方案2
0 已采纳 2013-10-31 08:30:49