不能更改特定框中的彈出寬度（ID）

Question

使用引導3我只想更改我在模板中使用的彈出窗口中的一個，並且位於名爲wrap的div中。

正如你可以看到我試過

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

Answer 1

正確的方法來做到這一點使用引導程序是調用酥料餅的模板方法，然後你可以添加類的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>

Answer 2

你需要指定腳本中容器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>