首页 文章

更改Bootstrap popover的宽度

提问于
浏览 553
165

我正在使用Bootstrap 3设计一个页面 . 我试图在输入元素上使用带有 placement: right 的弹出窗口 . 新的Bootstrap确保如果你使用 form-control ,你基本上有一个全宽输入元素 .

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中剩下的任何宽度 . 我想要左侧的输入表格,右侧有一个宽的弹出窗口 .

大多数情况下,我正在寻找一个解决方案,我不必覆盖Bootstrap .

附上的JsFiddle . 第二个输入选项 . Haven 't used jsfiddle a lot so don't知道,但尝试增加输出框的大小以查看结果,在较小的屏幕上甚至看不到它 . http://jsfiddle.net/Rqx8T/

18 回答

  • 304

    我用过这个(工作正常):

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

    我有同样的问题 . 花了很长时间寻找答案并找到了我自己的解决方案:将以下文字添加到头部:

    <style type =“text / css”>

    .popover {
    最大宽度:600px的;
    }
    </样式>

  • 29

    您可以在弹出窗口中使用属性data-container =“body”

    <i class="fa fa-info-circle" data-container="body" data-toggle="popover"
       data-placement="right" data-trigger="hover" title="Title"
       data-content="Your content"></i>
    
  • 27

    这里没有最终的解决方案:/只是一些想法如何“干净地”解决这个问题...

    原始JSFiddle的更新版本(jQuery 1.11 Bootstrap 3.1.1 class = "col-xs-"而不是class = "col-md-"):http://jsfiddle.net/tkrotoff/N99h7/

    现在与你的proposed solution相同的JSFiddle:http://jsfiddle.net/tkrotoff/N99h7/8/
    它不起作用:popover相对于 <div class="col-*"> 定位你想有相同的 <div class="col-*"> 多个输入...

    因此,如果我们想要将输入保持在输入上(语义上更好):

    • .popover { position: fixed; } :但是每次滚动页面时,弹出框都不会跟随滚动

    • .popover { width: 100%; } :没那么好,因为你仍然依赖于父宽度(即 <div class="col-*">

    • .popover-content { white-space: nowrap; } :仅当弹出窗口内的文本短于 max-width 时才有效

    http://jsfiddle.net/tkrotoff/N99h7/11/

    也许,使用最近的浏览器,new CSS width values可以解决问题,我没有尝试 .

  • 17

    这是使用悬停的非咖啡方式:

    $(".product-search-trigger").popover({
        trigger: "hover",
        container: "body",
        html: true,
        placement: "left"
      }).on("show.bs.popover", function() {
        return $(this).data("bs.popover").tip().css({
          maxWidth: "300px"
        });
      });
    });
    
  • 6

    我还需要一个更广泛的popover用于搜索文本字段 . 我想出了这个Javascript解决方案(这里是Coffee):

    $(".product-search-trigger")
      .click(-> false) # cancel click on <a> tag
      .popover
        container: "body"
        html: true
        placement: "left"
        title: "<strong>Product search</strong> enter number or name"
      .on("show.bs.popover", -> $(this).data("bs.popover").tip().css(maxWidth: "600px"))
    

    解决方法是在最后一行 . 在显示弹出窗口之前,max-width选项设置为自定义值 . 您还可以向tip元素添加自定义类 .

  • 6

    在@EML上面描述的关于模态窗口上的弹出窗口以及@ 2called-chaos显示的代码的帮助下,这就是我解决问题的方法 .

    我在模态上有一个图标,点击时应该弹出窗口

    我的HTML

    <i title="" class="glyphicon glyphicon-info-sign" rel="popover" data-title="Several Lines" data-content="A - First line
    B - Second line - Long line
    C - Third Line - Long Long Long Line"></i>

    我的剧本

    $('[rel=popover]').popover({
            placement: 'bottom',
            html: 'true',
            container: '#name-of-modal-window .modal-body'
        }).on("show.bs.popover", function () { $(this).data("bs.popover").tip().css("max-width", "600px"); });
    
  • 4

    用CSS增加宽度

    您可以使用CSS来增加弹出窗口的宽度,如下所示:

    /* The max width is dependant on the container (more info below) */
    .popover{
        max-width: 100%; /* Max Width of the popover (depending on the container!) */
    }
    

    如果这不起作用,您可能需要下面的解决方案并更改 container 元素 . (View the JSFiddle


    Twitter bootstrap容器

    如果这不起作用,您可能需要指定容器:

    // Contain the popover within the body NOT the element it was called in.
    $('[data-toggle="popover"]').popover({
        container: 'body'
    });
    

    更多信息

    Twitter Bootstrap popover increase width

    弹出窗口包含在触发它的元素中 . 为了将其扩展为“全宽” - 指定容器:

    // Contain the popover within the body NOT the element it was called in.
    $('[data-toggle="popover"]').popover({
        container: 'body'
    });
    

    JSFiddle

    查看JSFiddle以试用它 .

    JSFiddle:http://jsfiddle.net/xp1369g4/

  • 4
    <label id="txtLbl">Overview</label> <a tabindex="0" class="btn btn-default" role="button" data-toggle="popover"  data-placement="right" id="Pops" ></a>  
    <div id="popover-content" class="hide">
      <div class="popovermenu">
            Your content                   
      </div>
     </div>
    

    我最终将div“popover-content”宽度设置为我想要的数字 . (其他ids或 class 将无法工作.....)祝你好运!

    #popover-content{
          width: 600px;
    
      }
    
  • 3

    你还可以添加应该完成工作的data-container =“body”:

    <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-container="body"
    
                             data-content="My popover content.My popover content.My popover content.My popover content." />
        </div>
    </div>
    
  • 3

    一个测试解决方案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中或作为 option 对象的 option 并没有真正做到这一点[可能只是与CSS语句一起工作];

    此外,请记住Bootstrap 4 beta依赖popper.js进行弹出和工具提示定位(之前它是tether.js)

  • 2

    要更改宽度,您可以使用css

    For fixed size wanted

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

    For max width wanted:

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

    jsfiddlehttp://jsfiddle.net/Rqx8T/2/

  • 2

    试试这个:

    var popover_size=($('.popover').css('width'));
    var string=(popover_size).split('px');
    alert("string"+string);
    popover_size = ((parseInt(string[0])+350));
    alert("ps"+popover_size);
    $('.popover').css('width',parseInt(popover_size));
    
  • 1
    <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>
    

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

  • 1

    container: 'body' 通常可以做到这一点(如果你的弹出窗口处于一个模态中,请参见JustAnil 's answer above), but there' sa问题 . 当弹出窗口附加到 body 时, z-index 将它置于模态后面 . 这似乎与BS2 issue 5014有关,但我'm getting it on 3.1.1. You'并不意味着使用 bodybody ,但是如果您修复了代码

    $('#fubar').popover({
       trigger : 'hover',
       html    : true,
       dataContainer : '.modal-body',
       ...etc });
    

    然后你修复 z-index 问题,但弹出窗口宽度仍然是错误的 .

    我能找到的唯一解决方法是使用 container: 'body' 并添加一些额外的css:

    .popover { 
      max-width : 400px;
      z-index   : 1060;
    }
    

    请注意,css解决方案本身不起作用 .

  • 1

    对于喜欢JavaScript解决方案的人 . 在 Bootstrap 4 中,tip()变成了getTipElement(),它返回了一个没有jQuery的对象 . 因此,为了在Bootstrap 4中更改弹出窗口的宽度,您可以使用:

    }).on("show.bs.popover", function() {
        $($(this).data("bs.popover").getTipElement()).css("max-width", "405px");
    });
    
  • 0

    您可以使用上面指出的方法调整弹出窗口的宽度,但最好的办法是在Bootstrap看到之前定义内容的宽度并进行数学运算 . 例如,我有一个表,我定义了它的宽度,然后bootstrap构建了一个适合它的弹出窗口 . (有时Bootstrap无法确定宽度,你需要介入并握住它的手)

  • -2

    要更改弹出窗口宽度,您可以覆盖模板:

    $('#name').popover({
        template: '<div class="popover" role="tooltip" style="width: 500px;"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"><div class="data-content"></div></div></div>'
    })
    

相关问题