不能更改特定框中的弹出宽度（ID）
问题描述：
使用引导3我只想更改我在模板中使用的弹出窗口中的一个，并且位于名为wrap的div中。不能更改特定框中的弹出宽度（ID）
正如你可以看到我试过
#wrap .popover {
max-width: 600px;
}
，但它不工作！你能让我知道如何解决这个问题吗？由于
$("[data-toggle=popover]").popover({
html: true,
\t content: function() {
return $('#popover-content').html();
}
});#wrap .popover {
max-width: 600px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div id="wrap">
\t <a data-placement="bottom" data-toggle="popover" data-container="body" role="button" data-html="true" href="#" id="login" class="btn btn-default">Send</a>
\t <div id="popover-content" class="hide">
\t \t <div class="well well-sm" style="margin-top:16px; padding-top:14px; padding-bottom:0px;">
\t \t \t <div class="row">
\t \t \t \t <div class="col-md-12">
\t \t \t \t \t <div class="form-group">
\t \t \t \t \t \t <div class="input-group">
\t \t \t \t \t \t <input id="email" name="email" class="form-control" placeholder="Email" type="text">
\t \t \t \t \t \t <span class="btn input-group-addon" id="send-app">Send</span>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <p class="help-block animated"></p>
\t \t \t \t \t </div>
\t \t \t \t <div id="result"></div>
\t \t \t </div>
\t \t </div>
\t </div>
</div>
</div>
</div>
答
正确的方法来做到这一点使用引导程序是调用酥料饼的模板方法，然后你可以添加类的HTML模板样式或增加它的宽度在你的情况。
popover总是在包装elemenet 之外加载，所以你的css #wrap .popover {max-width：600px}不起作用。所以，我已经叫酥料饼中添加类锚.popCustom这将初始化酥料饼和模板：
template: '<div class="popover NewClassAdded"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>',
添加的自定义类NewClassAdded现在将是酥料饼的新基地，你可以现在轻松定制您的popover。
.popover.NewClassAdded{max-width:600px;}
这里是工作示例：
$(".popCustom").popover({
html: true,
template: '<div class="popover NewClassAdded"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>',
\t content: function() {
return $('#popover-content').html();
}
});.popover.NewClassAdded{max-width:600px;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div id="wrap">
\t <a data-placement="bottom" data-toggle="popover" data-container="body" role="button" data-html="true" href="#" id="login" class="btn btn-default popCustom">Send</a>
\t <div id="popover-content" class="hide">
\t \t <div class="well well-sm" style="margin-top:16px; padding-top:14px; padding-bottom:0px;">
\t \t \t <div class="row">
\t \t \t \t <div class="col-md-12">
\t \t \t \t \t <div class="form-group">
\t \t \t \t \t \t <div class="input-group">
\t \t \t \t \t \t <input id="email" name="email" class="form-control" placeholder="Email" type="text">
\t \t \t \t \t \t <span class="btn input-group-addon" id="send-app">Send</span>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <p class="help-block animated"></p>
\t \t \t \t \t </div>
\t \t \t \t <div id="result"></div>
\t \t \t </div>
\t \t </div>
\t </div>
</div>
</div>
</div>
答
你需要指定脚本中容器container:'#wrap'
$("[data-toggle=popover]").popover({
html: true,
container:'#wrap',
content: function() {
return $('#popover-content').html();
}
});
然后给一个自定义样式，以你的酥料饼
.popover{
max-width: 600px!important; /* Max Width of the popover (depending on the container!) */
}
退房这个片段
$("[data-toggle=popover]").popover({
html: true,
\t
\t container:'#wrap',
\t content: function() {
return $('#popover-content').html();
}
});.popover{
max-width: 600px!important; /* Max Width of the popover (depending on the container!) */
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
\t <div id="wrap">
\t \t <a data-placement="bottom" data-toggle="popover" data-container="body" role="button" data-html="true" href="#" id="login" class="btn btn-default">Send</a>
\t \t <div id="popover-content" class="hide">
\t \t \t <div class="well well-sm" style="margin-top:16px; padding-top:14px; padding-bottom:0px;">
\t \t \t \t <div class="row">
\t \t \t \t \t <div class="col-md-12">
\t \t \t \t \t \t <div class="form-group">
\t \t \t \t \t \t \t <div class="input-group">
\t \t \t \t \t \t \t <input id="email" name="email" class="form-control" placeholder="Email" type="text">
\t \t \t \t \t \t \t <span class="btn input-group-addon" id="send-app">Send</span>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t <p class="help-block animated"></p>
\t \t \t \t \t \t </div>
\t \t \t \t \t <div id="result"></div>
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
\t </div>
\t </div>
</div>+0
，但你仍然在使用通用slector'.popover '！ – Behseini
恳请给予好评，如果它可以帮助:) –