我有一个 bootstrap 导航栏，它有一个按钮可以触发带有表单的弹出窗口，但是表单的内容太小了
my question is how to resize, the popover?
- this is my code,
<!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>
- and this is my java script
$(document).ready(function(){
$('#popover').popover({
html : true,
title: function() {
return $("#popover-head").html();
},
content: function() {
return $("#popover-content").html();
}
});
});更新
当我检查元素时，我似乎有两个 pop over??(你可以在那里看到 2 个 BUKUWOW)
- here is what i got from 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>
- and this is my actual code
<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 个表单
最佳答案
您提供的代码似乎不足以让我测试结果。不过，我会尝试回答您的问题。
我假设您的 CSS 类“隐藏”具有样式“显示:无；”并将获得“显示:初始；”从 jQuery 中单击“弹出式链接”按钮。
<!-- 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)。宽度可自行编辑。提醒该样式不要添加到类“隐藏”中，这将影响类“隐藏”中的所有元素。
希望这对你有帮助;)
关于jquery - 如何在弹出窗口下拉列表中调整表单大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28977615/