Home / Questions / 52785
Accepted
bypabloc_
Asked: 2020-03-03 11:50:35 +0800 CST 2020-03-03 11:50:35 +0800 CST

如何使引导弹出框的大小适应内容的大小？

  • 772

我有存储在 a 中的信息popover，我希望它适应它所拥有的内容，但我找不到如何。这里的例子：

$( document ).ready(function() {
   $('#prueba').html(funcion());
   $('[data-toggle="popover"]').popover({
         html : true
   }); 
});
    
    
function funcion(){
        var json = [{
              "id_procesos": 3,
              "p": "Llenado de productos",
              "unidad_teorica": 33333,
              "udm": "ml",
              "velocidad": 120
            },
            {
              "id_procesos": 2,
              "p": "Mezclaaaaaaaaaaa",
              "unidad_teorica": 200,
              "udm": "gg",
              "velocidad": null
            }];
      console.debug(json);

      var procesos = "<table class='table table-hover'><tr><th>Nombre</th><th>Unidad Teórica</th><th>Velocidad</th><th>Tiempo Teórico</th></tr>";
      $( json ).each(function( i, j ) {
          procesos += "<tr>";
              procesos += "<td>"+j.p + "</td>";
              procesos += "<td>"+j.unidad_teorica + " "+j.udm+"</td>";
              if(j.velocidad){
                  procesos += "<td>"+j.velocidad + "<sup>"+ j.udm+" </sup>/<sub>min</sub></td>";
                  procesos += "<td>"+tiempo_teorico(j.unidad_teorica,j.velocidad,'1') +"</td>";
              }else{
                  procesos += "<td></td>";
                  procesos += "<td></td>";
              }
          procesos += "</tr>";
      });
      procesos += "</table>";
      return '<a href="#" data-toggle="popover" title="Procesos" data-content="'+procesos+'">Info</a>';
}
    
    
    function tiempo_teorico(c_u_t, c_v, c_u_m){
        var result = '';
        if(c_v==''){
            return result;
        }else if(c_v==0){
            result = 'La Velocidad del Producto no puede ser igual a 0';
            return result;
        }else if((c_u_t!='') && (c_v!='') && (c_u_m!=null) && (c_u_m!='')){
            var time = Math.floor( (c_u_t/c_v)*60 );  
            var hours = Math.floor( time / 3600 );  
            var minutes = Math.floor( (time % 3600) / 60 );
            var seconds = time % 60;
            //Anteponiendo un 0 a los minutos si son menos de 10 
            minutes = minutes < 10 ? '0' + minutes : minutes;
            //Anteponiendo un 0 a los segundos si son menos de 10 
            seconds = seconds < 10 ? '0' + seconds : seconds;
            result = hours + ":" + minutes + ":" + seconds;  // 2:41:30
            return result;
        }
    }
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="prueba"></div>

注意：我知道

混合啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
他们不会插入一个词，但您永远不知道用户是否会使用长词并避免将来出现问题，我希望他popover适应内容。

PS：提前感谢任何可以给我帮助和时间的人：D

javascript

2 Answers

  1. Best Answer

    覆盖: max-width_.popover

    $( document ).ready(function() {
   $('#prueba').html(funcion());
   $('[data-toggle="popover"]').popover({
         html : true
   }); 
});
    
    
function funcion(){
        var json = [{
              "id_procesos": 3,
              "p": "Llenado de productos",
              "unidad_teorica": 33333,
              "udm": "ml",
              "velocidad": 120
            },
            {
              "id_procesos": 2,
              "p": "Mezclaaaaaaaaaaa",
              "unidad_teorica": 200,
              "udm": "gg",
              "velocidad": null
            }];
      console.debug(json);

      var procesos = "<table class='table table-hover'><tr><th>Nombre</th><th>Unidad Teórica</th><th>Velocidad</th><th>Tiempo Teórico</th></tr>";
      $( json ).each(function( i, j ) {
          procesos += "<tr>";
              procesos += "<td>"+j.p + "</td>";
              procesos += "<td>"+j.unidad_teorica + " "+j.udm+"</td>";
              if(j.velocidad){
                  procesos += "<td>"+j.velocidad + "<sup>"+ j.udm+" </sup>/<sub>min</sub></td>";
                  procesos += "<td>"+tiempo_teorico(j.unidad_teorica,j.velocidad,'1') +"</td>";
              }else{
                  procesos += "<td></td>";
                  procesos += "<td></td>";
              }
          procesos += "</tr>";
      });
      procesos += "</table>";
      return '<a href="#" data-toggle="popover" title="Procesos" data-content="'+procesos+'">Info</a>';
}
    
    
    function tiempo_teorico(c_u_t, c_v, c_u_m){
        var result = '';
        if(c_v==''){
            return result;
        }else if(c_v==0){
            result = 'La Velocidad del Producto no puede ser igual a 0';
            return result;
        }else if((c_u_t!='') && (c_v!='') && (c_u_m!=null) && (c_u_m!='')){
            var time = Math.floor( (c_u_t/c_v)*60 );  
            var hours = Math.floor( time / 3600 );  
            var minutes = Math.floor( (time % 3600) / 60 );
            var seconds = time % 60;
            //Anteponiendo un 0 a los minutos si son menos de 10 
            minutes = minutes < 10 ? '0' + minutes : minutes;
            //Anteponiendo un 0 a los segundos si son menos de 10 
            seconds = seconds < 10 ? '0' + seconds : seconds;
            result = hours + ":" + minutes + ":" + seconds;  // 2:41:30
            return result;
        }
    }
    .popover {
  max-width: 90% !important;
}
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="prueba"></div>

    • 3

  2. 引导弹出框的最大宽度在样式表中默认为 276px。

    如果您覆盖样式以拥有max-width:100%它，它可以占据整个容器。

    .popover {
  max-width: 100% !important;
}

    现在我为什么放important？仅仅因为在跟随引导样式的演示中覆盖了小提琴样式。在您的情况下，您可能不需要它。

    $( document ).ready(function() {
   $('#prueba').html(funcion());
   $('[data-toggle="popover"]').popover({
         html : true
   }); 
});
    
    
function funcion(){
        var json = [{
              "id_procesos": 3,
              "p": "Llenado de productos",
              "unidad_teorica": 33333,
              "udm": "ml",
              "velocidad": 120
            },
            {
              "id_procesos": 2,
              "p": "Mezclaaaaaaaaaaa",
              "unidad_teorica": 200,
              "udm": "gg",
              "velocidad": null
            }];
      console.debug(json);

      var procesos = "<table class='table table-hover'><tr><th>Nombre</th><th>Unidad Teórica</th><th>Velocidad</th><th>Tiempo Teórico</th></tr>";
      $( json ).each(function( i, j ) {
          procesos += "<tr>";
              procesos += "<td>"+j.p + "</td>";
              procesos += "<td>"+j.unidad_teorica + " "+j.udm+"</td>";
              if(j.velocidad){
                  procesos += "<td>"+j.velocidad + "<sup>"+ j.udm+" </sup>/<sub>min</sub></td>";
                  procesos += "<td>"+tiempo_teorico(j.unidad_teorica,j.velocidad,'1') +"</td>";
              }else{
                  procesos += "<td></td>";
                  procesos += "<td></td>";
              }
          procesos += "</tr>";
      });
      procesos += "</table>";
      return '<a href="#" data-toggle="popover" title="Procesos" data-content="'+procesos+'">Info</a>';
}
    
    
    function tiempo_teorico(c_u_t, c_v, c_u_m){
        var result = '';
        if(c_v==''){
            return result;
        }else if(c_v==0){
            result = 'La Velocidad del Producto no puede ser igual a 0';
            return result;
        }else if((c_u_t!='') && (c_v!='') && (c_u_m!=null) && (c_u_m!='')){
            var time = Math.floor( (c_u_t/c_v)*60 );  
            var hours = Math.floor( time / 3600 );  
            var minutes = Math.floor( (time % 3600) / 60 );
            var seconds = time % 60;
            //Anteponiendo un 0 a los minutos si son menos de 10 
            minutes = minutes < 10 ? '0' + minutes : minutes;
            //Anteponiendo un 0 a los segundos si son menos de 10 
            seconds = seconds < 10 ? '0' + seconds : seconds;
            result = hours + ":" + minutes + ":" + seconds;  // 2:41:30
            return result;
        }
    }
    .popover {
    max-width: 100% !important;
}
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="prueba"></div>

    • 2