我正在使用Bootstrap 3设计一个页面。我试图使用一个弹窗的位置:正确的输入元素。新的Bootstrap确保如果你使用表单控件,你基本上有一个全宽的输入元素。

HTML代码看起来像这样:

<div class="row">
    <div class="col-md-6">
        <label for="name">Name:</label>
        <input id="name" class="form-control" type="text" 
                         data-toggle="popover" data-trigger="hover" 
                         data-content="My popover content.My popover content.My popover content.My popover content." />
    </div>
</div>

弹窗宽度太低,在我看来,因为他们没有任何宽度留在div。 我想在左侧输入表单,并在右侧宽弹窗。

大多数情况下,我正在寻找一个解决方案,我不需要覆盖引导。

附上的JsFiddle。第二个输入选项。没有使用jsfiddle很多,所以不知道,但尝试增加输出框的大小来查看结果,在较小的屏幕上甚至看不到它。 http://jsfiddle.net/Rqx8T/


当前回答

您可以更改弹出窗口的模板。可以使用data-template-属性,也可以使用函数中设置它的相关部分:

<html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </head> <body> <span class="text-green" data-toggle="popover" data-placement="right" data-template="<div class=&quot;popover fade top in&quot; style=&quot;max-width:none;&quot; role=&quot;tooltip&quot;><div class=&quot;arrow&quot;></div><h3 class=&quot;popover-title&quot;></h3><div class=&quot;popover-content&quot;></div></div>" data-trigger="manual" data-original-title="Some Title" data-content="<div>Some really long text and stuff. Some really long text and stuff. Some really long text and stuff. Some really long text and stuff.</div>" data-html="true" onclick="$(this).popover('show');">clickme</span> </body> </html>

其他回答

我使用了这个(工作正常):

.popover{
   background-color:#b94a48;
   border:none;
   border-radius:unset;
   min-width:100px;
   width:100%;
   max-width:400px;
   overflow-wrap:break-word;
}

Bootstrap 4 beta测试的一个解决方案:

.popover {
        min-width: 30em !important;
    }

和jQuery语句一起使用:

$('[data-toggle="popover"]').popover({
      container: 'body',
      trigger: 'focus',
      html: true,
      placement: 'top'
    })

附注:data-container="body"或container: "body"在HTML中或作为弹窗({})对象的选项都没有真正做到这一点[也许do可以,但只有与CSS语句一起];

另外,请记住Bootstrap 4 beta依赖于popper.js来定位弹出窗口和工具提示(在此之前是tether.js)

要改变宽度,你可以使用css

需要固定尺寸

.popover{
    width:200px;
    height:250px;    
}

需要的最大宽度:

.popover{
    max-width:200px;
    height:250px;    
}

jsfiddle: http://jsfiddle.net/Rqx8T/2/

对于typescript组件:

@Component({
    selector: "your-component",
    templateUrl: "your-template.component.html",
    styles: [`
        :host >>> .popover {
          max-width: 100%;
        }
    `]
})
<div class="row" data-toggle="popover" data-trigger="hover" 
                 data-content="My popover content.My popover content.My popover content.My popover content.">
<div class="col-md-6">
    <label for="name">Name:</label>
    <input id="name" class="form-control" type="text" />
</div>
</div>

基本上我把弹窗代码放在行div,而不是输入div。解决了这个问题。