Question

我有一个bootstrap导航栏，其中有一个按钮可以触发内部有弹出形式的弹出窗口，但是表单内容太小

look like this

我的问题是如何调整大小，popover？


这是我的代码，

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="http://snipplicious.com/css/font-awesome-4.1.0.min.css">
        <link rel="stylesheet" href="./css/style.css" />
        
    </head>
    <body class="body">
       <div class="wrapper">
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navigation">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand text-uppercase" href="#">Bukuwow <span class="label label-success text-capitalize">Free</span></a>
        </div>
    
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="navigation">
            <ul class="nav navbar-nav navbar-right">
                           
                <!-- Start of pop over -->
                
                <li class="dropdown">
<!--                    <button type="button" class="btn btn-success navbar-btn btn-circle dropdown-toggle" data-toggle="dropdown">Sign in</button>-->
                    <a href="#" id="popover" data-toggle="popover" data-placement="bottom">the pop over link</a>
                    <div id="popover-head" class="hide"><strong>BUKUWOW</strong></div>
                    <div id="popover-content" class="hide">
                        
                         <form id="loginform" method="post" action="index.php" class="form">
                             
                                    <h5><strong>Login</strong></h5>
                                    <div class="form-group ">
                                        <div class="input-group">
                                            <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
                                            <input class="form-control" type="text" name="username" id="username" placeholder="username" size="20" maxlength="100">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="input-group">
                                            <span class="input-group-addon"><span class="glyphicon glyphicon-log-in"></span></span>
                                            <input class="form-control" type="password" name="password" id="password" placeholder="password" size="20" maxlength="100">
                                        </div>
                                    </div>
                                    <input class="btn-default btn-sm" id="loginbutton" type="submit" value="Submit">
                                     
                                </form>
                       
                    </div>
                </li>
              <!-- End of pop over -->
            </ul>
        </div>
      </div>
    </nav>
           
    
  
</div>

这是我的java脚本

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

更新

当我检查元素时，似乎我有两次弹出？（你可以在那里看到2个BUKUWOW）

这是我从firebug得到的东西

<li class="dropdown">
<a id="popover" data-placement="bottom" data-toggle="popover" href="#" data-original-title="" title="" aria-describedby="popover115502">the pop over link</a>
<!-- START this is the code which not exist in my actual code -->
<div id="popover115502" class="popover fade bottom in" role="tooltip" style="width: 300px; top: 50px; left: 0px; display: block;">
<div class="arrow" style="left: 50%;"></div>
<h3 class="popover-title">
<strong>BUKUWOW</strong>
</h3>
<div class="popover-content">
<form id="loginform" class="form" action="index.php" method="post">
<h5>
<div class="form-group ">
<div class="form-group">
<input id="loginbutton" class="btn-default btn-sm" type="submit" value="Submit">
</form>
</div>
</div>
<!-- END this is the code which not exist in my actual code -->
<div id="popover-head" class="hide">
<strong>BUKUWOW</strong>
</div>
<div id="popover-content" class="hide" style="width: 300px;">
<form id="loginform" class="form" action="index.php" method="post">
<h5>
<div class="form-group ">
<div class="form-group">
<input id="loginbutton" class="btn-default btn-sm" type="submit" value="Submit">
</form>
</div>
</li>

这是我的实际代码

<li class="dropdown">
<!--                    <button type="button" class="btn btn-success navbar-btn btn-circle dropdown-toggle" data-toggle="dropdown">Sign in</button>-->
                    <a href="#" id="popover" data-toggle="popover" data-placement="bottom">the pop over link</a>
                    <div id="popover-head" class="hide"><strong>BUKUWOW</strong></div>
                    <div style="width: 300px;" id="popover-content"  class="hide">
                        
                         <form id="loginform" method="post" action="index.php" class="form">
                             
                                    <h5><strong>Login</strong></h5>
                                    <div class="form-group ">
                                        <div class="input-group">
                                            <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
                                            <input class="form-control" type="text" name="username" id="username" placeholder="username" size="20" maxlength="100">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="input-group">
                                            <span class="input-group-addon"><span class="glyphicon glyphicon-log-in"></span></span>
                                            <input class="form-control" type="password" name="password" id="password" placeholder="password" size="20" maxlength="100">
                                        </div>
                                    </div>
                                    <input class="btn-default btn-sm" id="loginbutton" type="submit" value="Submit">
                                     
                                </form>
                       
                    </div>
                </li>

如您所见，在代码3中，它看起来我有2个表单，但在我的实际代码（数字4）中我只有1个表单

Answer 1

您提供的代码似乎不足以让我测试结果。但是我会尝试回答你的问题。

我假设你的CSS课程＆＃34;隐藏＆＃34;有风格＆＃34;显示：无;＆＃34;将得到＆＃34;显示：初始;＆＃34;来自jQuery，点击按钮＆＃34; pop-over链接＆＃34;。

<!-- your HTML file -->
<div style="width: 300px;" id="popover-content" class="hide">
<!-- Your form goes here -->
</div>

或

/*CSS file*/
#popover-content{width: 300px;}

这两种方法只是为弹出框架添加固定宽度（通过内联CSS或外部CSS）。宽度可由您自己编辑。提醒这种风格不应该添加到类＆＃34;隐藏＆＃34;，这将影响类中的所有元素＆＃34;隐藏＆＃34;。

希望这可以帮到你;）

如何在popover下拉列表中调整表单大小

1 个答案: